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

Rebind a JQuery function to an input field after innerHTML command

本文关键字：绑定 字段 输入 新绑定 之后 命令 innerHTML 函数 JQuery      更新时间：2023-09-26

Im使用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？

谢谢。

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

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

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

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

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

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

（请注意，如果将第二个参数留给.on()，它将创建一个与.bind()相同的非委托处理程序。）

为什么不把整个混乱打包到一个函数中呢？您可以同时调用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();
});

您使用的是什么版本的jQuery？

您可以使用.live()或.on()（jQuery>=1.7）而不是.bind()

相关文章：