防止添加多个事件处理程序

Question

我有一个文件输入

<input type=file class=file-input/> 

它最初一个页面上，它可以通过单击“添加”按钮，在页面上，在每个加，我做的动态创建如下：

$(".file-input[type=file]").change(alert("hello")) 

说我点击添加一次，我会在页面上有两个文件输入。 单击第一个文件输入时，我会得到两个警报，而单击第二个文件输入时，会有一个警报，原因是我已经为第一个文件输入的onChange事件添加了两次警报（“hello”），而第二个文件输入。

是否有办法让每个文件只输入一次alert（“hello”）？

Answer 1

，而不是试图重新绑定每个新创建的元素，你可以绑定一个事件应用于任何匹配的元素，现在或将来，使用$.on()：

$(document).on("change", ".file-input[type=file]", function(event) { 
    alert("hello"); 
}); 

你只需做一次在页面加载。

Answer 2

有几个选项。一个是使用jquery的on的事件委托。通过这种方式，您可以在一开始就将处理程序附加到公共父元素，然后在创建新元素时不需要重新附加。例如：

$("<some common parent>").on("change", ".file-input[type=file]", function(){ 
    ... 
}); 

如果绝对必要的话，这里的常见父项可以是document。理想情况下，这应该是一些对所有文件输入都通用的选择器。

另一种选择是在创建时的事件简单地连接到单独的元素：

$("<input>")... stuff 
    .change(...) 

这样你只会附加到一个元素，而不是现有的所有元素。

Answer 3

您必须在页面的初始化中执行一次。

作为一种变通方法解决方案中使用过（）来分离前处理程序：

$(".file-input[type=file]").off('change').on('change',function(){ 
alert("hello"); 
});