當您更改innerHTML屬性

Question

確定與處理程序會發生什麼事可以說我有

<div id="container"/> 

，我把一個按鈕，在使用id =「按鈕」這個容器。然後，我爲它

$("#button").click(function() { 
foo(); 
} 

然後我改變DIV的innerHTML這樣。單擊處理程序：

$("#container").html = "<h1> Foo </h1>"; 

然後我設置定時器，讓我們比方說5秒後，將執行以下代碼：

function(){ 
$("#container").html = "<button id="button" type="button">Click Meh!</button>" 
$("#button").click(function() { 
foo(); 
} 
} 

我的問題是：第一個按鈕被「摧毀」，第一個.click（）處理程序也被銷燬了嗎？或者第二個.click（）將爲同一個按鈕創建第二個處理程序，如果我只想要1個處理程序，則在調用第二個.click（）之前，我必須使用$("#button").off("click")？

Answer 1

1. 是的，當你刪除元素（通過覆蓋元素的html），你已經用元素disassosciated點擊處理程序。

2. 相反，我們應該只關注委派事件。我們的目標一個靜態的父元素（如容器），而該事件委託給它：

$('#container').on('click', '#button', foo);

現在單擊該按鈕時，我們就斷火foo的功能。即使您稍後刪除該按鈕並添加該按鈕，該活動仍將被委派給'#container'。

Answer 2

是的，一旦你刪除了按鈕，第一個處理程序也將因爲使用「.click（）」功能而被破壞。您不需要顯式刪除該點擊處理程序。

或者使用下面的「.on」函數，那麼你不需要一次又一次地寫函數。它會檢查動態添加元素並附加事件。

$("body").on("click", "#button", function() { 
foo(); 
}); 

Answer 3

如果你的問題是如果你必須在dom更改時重新綁定onclick處理程序，那麼答案是肯定的。

如果你在問處理函數是怎麼回事，我的猜測是它會在節點被刪除時得到垃圾回收，如果你想避免創建幾個函數，只需將處理程序寫爲命名函數，並且使用它而不是匿名的..

如果你問這個處理程序是否會被綁定兩次：它將被綁定到選擇結果中的任何內容，如果第一個按鈕在你運行.click時存在，那麼它將盡管#id只返回1節點，所以它會綁定到它找到的第一個＃按鈕，無論它是否已經綁定...