Question

我有一个文件输入

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

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

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

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

有没有办法让每个文件只输入一次警报（“你好”）？

Answer 1

有几个选择。一种方法是使用jquery的on进行事件委托。通过这种方式，您可以在开始时将处理程序附加到公共父级，然后在创建新处理程序时不需要重新附加。像这样：

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

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

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

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

通过这种方式，您只会附加到那一个元素而不是所有现有元素。

Answer 2

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

作为一种解决方案，使用off（）来分离以前的处理程序：

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

Answer 3

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

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

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