0

尝试使用 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 文件都与主页一起加载。

我究竟做错了什么？我的绑定方式不正确吗？

谢谢！

4

1 回答 1

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

请注意，我使用了 jQuery 1.7.delegate()而不是后者，.live()因为后者已被贬低。如果您使用的是 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(); 
    });
于 2012-01-23T17:47:00.903 回答