防止添加多個事件處理程序

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"); 
});