无法将输入事件从动态加载的表单绑定到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 。 您应该在元素上将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 : .on()
• .delegate()文档： http : .delegate()

如果要为AJAX请求设置回调函数（根据示例）中的事件绑定，则不需要使用事件委托，只需在添加元素后直接在元素上运行插件到DOM：

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