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时，根本不会触发上述功能。

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

这就是发生的事情：

第一次：没有任何事情发生（但是上面的功能被触发，确认使用警报）。即没有文件附加到lista 要上传的文件。
第二次：该文件已添加到列表中。

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

以防万一我也包括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(); 
    });

无法将输入事件从动态加载的表单绑定到jQuery多文件

1 个答案: