Question

我使用JQuery从html文件输入字段检查文件大小和名称。输入字段为：

<div id="uploadFile_div">
    <input name="source" id="imageFile" type="file" style ="border: 1px solid #576675;">
</div>

和JQuery：

$(document).ready(function(){

    $('#imageFile').bind('change', function() {

    alert("Test");
    //.... perform input checks...//

    });   
});

现在，我有一个选择框，用户在图像文件或视频文件之间进行选择，并根据它将文件发送到不同的服务器并执行适当的检查。为了重置输入字段（当用户将选择框从视频更改为图像时我这样做，反之亦然）我使用这个JavaScript技巧：

document.getElementById('uploadFile_div').innerHTML = document.getElementById('uploadFile_div').innerHTML;

但是在执行这个JavaScript之后，JQuery没有绑定，当我选择文件时，我没有看到“测试”警告。

我如何重新绑定JQuery？

感谢。

Answer 1

您可以使用委托事件处理程序，将事件绑定到父div：

$('#uploadFile_div').on('change','#imageFile', function() {
   // etc

演示：http://jsfiddle.net/SfgpS/

（如果您使用的是早于1.7的jQuery版本，请使用.delegate()而不是.on()。如果您使用真正的旧版本的jQuery，请使用{ {1}}。）

当你重写容器的.live()时，它会有效地删除旧的输入元素，包括绑定到它的事件处理程序，然后创建一个新的输入。因此，您可以在此时重新运行原始.innerHTML语句，以将处理程序绑定到新输入。

对于.bind()的语法，使用委托事件处理程序将处理程序绑定到容器，即在这种情况下绑定到div。发生在容器的子（ren）上的事件冒泡到容器（然后直到文档）。因此，在这种情况下，当一个更改事件到达div时，jQuery检查它是否源自与.on()的第二个参数匹配选择器的元素，如果是，则调用您的处理函数。这使您可以处理创建处理程序时不存在的元素上的事件。如果删除并重新添加子元素，则无关紧要，因为处理程序已绑定到容器。

（请注意，如果您将第二个参数遗漏给.on()，则会创建一个与.on()相同的非委派处理程序。）

Answer 2

为什么不把整个混乱包裹在一个函数中，你可以同时调用onReady，然后只要你想重置上传表单？

var resetUpload = function() {

  document.getElementById('uploadFile_div').innerHTML = document.getElementById('uploadFile_div').innerHTML;

  $('#imageFile').bind('change', function() {
    alert("Test");
    //.... perform input checks...//
  });
}

// run on ready
$(document).ready(function () {
  resetUpload();
});

Answer 3

您使用的是哪个版本的jQuery？

您可以使用.live()或.on()（jQuery＆gt; = 1.7）代替.bind()

在innerHTML命令之后将JQuery函数重新绑定到输入字段

3 个答案: