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

Question

Я получаю странное поведение при попытке загрузить файлы с помощью многофайлового плагина 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 загружаются вместе с главной страницей.

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

Спасибо!

Answer 1

Ну плагин 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() разные.

• Документы для .on(): http://api.jquery.com/on
• Документы для .delegate(): http://api.jquery.com/delegate

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

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