无法将输入事件绑定到动态加载表单中的 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 时，上面的函数根本不会被触发。

我已成功在将表单加载为动态内容之前上传文件。当将表单加载到我的主页时，我当然必须以某种方式绑定事件。

这是发生的情况：

• 第一次：什么也没发生（但是上面的函数被触发了， 使用警报确认）。即没有文件附加到列表中 要上传的文件。
• 第二次：文件被添加到列表中。

在我第一次尝试添加文件和第二次工作之前，绑定似乎没有实现。

以防万一我也包含了 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>

在下面 Jasper 的反馈后对此进行了测试：

$("#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 。您应该在元素添加到 DOM 后立即调用该元素的 MultiFile 插件。

我不确定您如何动态地将表单添加到页面，但这里有一个说明：

$.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(); 
    });