0

我使用 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;

但是在执行 1 次此 JavaScript 后，JQuery 未绑定，我在选择文件时看不到“测试”警报。

我怎样才能重新绑定 JQuery ？

谢谢。

4

3 回答 3

2

您可以使用委托事件处理程序，将事件绑定到父 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()。）

于 2012-07-11T12:26:21.350 回答
0

为什么不将整个混乱包装在一个您可以同时调用的函数中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();
});
于 2012-07-11T12:20:13.353 回答
0

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

您可以使用.live()or .on()(jQuery >= 1.7) 代替.bind()

于 2012-07-11T12:23:06.877 回答