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

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

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

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

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

但是在执行了1次JavaScript之后，JQuery没有绑定，并且在选择文件时，我没有看到“测试”警报

如何重新绑定JQuery

---

谢谢。

为什么不把所有的麻烦都打包成一个函数呢？你可以调用

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（）

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

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

演示：

（如果您使用的jQuery版本早于1.7，请使用

.delegate（）

而不是

.on（）

。如果您使用的是非常旧的jQuery版本，请使用

.live（）

）

重写容器的

.innerHTML

时，该容器将有效地删除旧的输入元素，包括绑定到该元素的事件处理程序，然后创建新的输入。因此，您可以在此时重新运行原始的

.bind（）

语句，将处理程序绑定到新输入

对于

.on（）

的语法，使用委托事件处理程序，可以将处理程序绑定到容器，即在本例中绑定到div。发生在容器的子对象（ren）上的事件会在容器中出现（然后直接出现在文档中）。因此，在本例中，当更改事件到达div jQuery时，将检查它是否源自与

.on（）

的第二个参数中的选择器匹配的元素，如果是，则调用your handler函数。这使您能够处理在创建处理程序时不存在的元素上的事件。删除并重新添加子元素并不重要，因为处理程序已绑定到容器

---

（请注意，如果将第二个参数省略为

.on（）

，它将创建一个与

.bind（）

相同的非委托处理程序）

是否再次运行

.bind（）

语句？你卡在哪里了？我怎么能再跑一遍？我对JQuery非常陌生；0）非常感谢，它与上的

完美配合。您能否解释一下，为什么在
innerHTML
命令之后，hander在原始代码中被解除绑定，而不是与当前代码解除绑定？我想了解这里发生了什么，而不仅仅是解决问题。。。再次感谢。我明白了，现在实际发生的事情是，我们将一个处理程序绑定到容器div，并且由于在使用
innerHTML
命令时该div没有被删除，因此事件处理程序仍然绑定在它之后。我跟对了吗？是的，差不多就是这样。谷歌“事件冒泡”了解更多细节。或者你可以阅读。
$('#uploadFile_div').on('change','#imageFile', function() {
   // etc