Невозможно привязать входное событие к мультифайлу jQuery из динамически загруженной формы - PullRequest
Новая
       35

Невозможно привязать входное событие к мультифайлу jQuery из динамически загруженной формы

0 голосов
/ 23 января 2012

Я получаю странное поведение при попытке загрузить файлы с использованием многофайлового плагина jQuery из динамически загружаемой формы.

Я использую Firefox 9.0.1 / Mac

Вот как я пытаюсь привязаться к событию изменения: я тоже пробовал размытие (и нажимаю и ...) 

$('#newticketform').live('change',function (e){ //newticket form is the form in which my input type=file is contained       
         $('#my_file_element').MultiFile(); //my_file_element is the input type=file element
});

Должна ли привязка быть к форме или полю ввода?Я попробовал оба без каких-либо различий в поведении.

При использовании .on вместо .live вышеуказанная функция вообще не срабатывает.

Мне удалось загрузить файлы перед загрузкой формы в виде динамического содержимого.При загрузке формы на мою главную страницу я, конечно, должен каким-то образом привязать событие.

Вот что происходит:

  • 1-й раз: ничего не происходит (но его функция активируется, подтверждается с помощью оповещения).Т.е. к списку файлов, которые нужно загрузить, не прикреплено ни одного файла.
  • 2-й раз: файл добавляется в список.

Похоже, что привязка не реализована до того, как в первый раз я пытаюсь добавить файл, и во второй раз, когда он работает,

На всякий случай я включаю и html: 

<form method="post" enctype="multipart/form-data" id="newticketform">
        <input type="hidden" value="2000000" name="MAX_FILE_SIZE">
        <label for="title">Rubrik</label> <input type="text" name="title" id="title"><br><br>
                 <label for="description">Beskrivning</label> <textarea name="description" id="description" cols="50" rows="15"></textarea><br> 

                 <input type="file" maxlength="5" name="file[]" id="my_file_element" class="multi">
                 <div id="files_list"></div>
                 <input type="submit" value="Upload" name="upload"> 
 </form>

Протестировано это после обратной связи с Джаспером ниже: 

$("#newticketmenu").live('click',function(event){
          $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket/newticket.php", function(){
                $('#newticketform').on('change', '#my_file_element', function (){     
                    $(this).MultiFile();
                })
                addNewTicketValidation();                                          
          });
      });

Тем не менее, точно такое же поведение.

Все файлы JavaScript загружаются вместе с главной страницей.

Что я делаю не так?Мой способ привязки неверен?

Спасибо!

1 Ответ

1 голос
/ 23 января 2012

Ну, плагин MultiFile должен быть вызван до того, как пользователь взаимодействует с вводом файла. Вы должны вызвать плагин MultiFile для элемента, как только он будет добавлен в DOM.

Я не уверен, как вы динамически добавляете форму на страницу, но вот пример: 

$.ajax({
    url     : '<url>',
    success : function (serverResponse) {
        $('#my-form-container').html(serverResponse).find('#my_file_element').MultiFile();
    }
});

Кстати, ваш код, кажется, привязан к форме для события change, которая должна быть привязана к элементам ввода внутри формы. Вы можете попробовать это: 

$('#my-form-container').delegate('#my_file_element', 'change',function (){     
    $(this).MultiFile();
});

Обратите внимание, что я использовал .delegate() вместо .live(), так как последний был амортизирован с jQuery 1.7. Если вы используете jQuery 1.7+, вы можете использовать .on() аналогичным образом, чтобы делегировать обработку событий: 

$('#my-form-container').on('change', '#my_file_element', function (){     
    $(this).MultiFile();
});

Обратите внимание, что порядок параметров для .delegate() и .on() различен.

Если вы устанавливаете привязку события внутри функции обратного вызова (что соответствует вашему примеру) для вашего AJAX-запроса, вам не нужно использовать делегирование события, вы можете просто запустить плагин для элемента сразу после Вы добавляете его в DOM: 

    $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket
              /newticket.php", function(){ 
              $('#my_file_element').MultiFile(); 
              addNewTicketValidation(); 
    });
...