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

Question

我有一个文件输入

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

它最初在页面上有一个，可以通过单击页面上的“添加”按钮动态创建，在每次添加期间，我执行以下操作：

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

假设我单击一次添加，我将在页面上输入两个文件。单击第一个文件输入时我会收到两个警报，而单击第二个文件输入时会收到一个警报，原因是我在第一个文件输入的 onChange 事件中添加了两次警报（“hello”），而在第二个文件输入中添加了一次。

有没有办法让每个文件只输入一次 alert("hello") ？

score 5 · Accepted Answer

有几个选项。一种是使用带有 jquery on的事件委托。这样，您在开始时将处理程序附加到一个共同的父级，然后在创建新的父级时不需要重新附加。像这样的东西：

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

document如果绝对必要的话，这里的共同父母可以是。理想情况下，这应该是所有文件输入通用的选择器。

另一种选择是在创建时简单地将事件附加到单个元素：

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

这样，您将只附加到那个元素而不是所有现有元素。

score 2 · Accepted Answer

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

作为一种解决方法，使用 off() 来分离以前的处理程序：

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

score 1 · Accepted Answer

您可以使用以下方法绑定单个事件以应用于当前或未来的任何$.on()匹配元素，而不是尝试重新绑定每个新创建的元素：

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

您只需在页面加载时执行此操作一次。

3 回答 3