重新追加元素時，爲什麼點擊事件不起作用？

Question

爲什麼點擊事件在此代碼不能工作（的jsfiddle：http://jsfiddle.net/3WeP5/）：

var holder = $("<div></div>"); 

$(document.body).append(holder); 

var btn = $("<button>Click Here</button>"); 

btn.click(function(){alert('clicked');}); 

holder.append(btn); 
holder.html(""); 
holder.append(btn); 

你可以替換該行：

btn.click(function(){alert('clicked');}); 

與（不再工作）：

btn.bind("click",function(){alert('clicked');}); 

如果我不使用jQuery並設置這樣的JavaScript事件，它工作正常！

btn[0].onclick=function(){alert('clicked');} 

爲什麼單擊事件不`噸工作時，我再追加元素（按鈕），我該如何解決？

Answer 1

看的documentation of .html()：

當.html（）用於設置元素的內容時，該元素中的任何內容爲 完全被新內容取代。 此外，jQuery刪除其他構造，如數據和事件 來自子元素的處理程序，然後用 新內容替換這些元素。

holder.html("");正在刪除該按鈕的處理程序。如果你想保留它，你可以使用clone作爲：

holder.append(btn.clone(true)); 
holder.html(""); 
holder.append(btn.clone(true)); 

Answer 2

使用event delegation：

$(document.body).on('click', btn, function() { 
    alert('clicked!'); 
}); 

您的代碼亙古不工作，因爲當腳本，如果第一次加載它綁定功能，特定元素，但是當你添加另一個腳本亙古再次運行等附加元素沒有得到它的事件綁定。當我們添加事件委託時，我們的目標是document.body，所以當腳本被加載時，事件被綁定到body上的那個元素。

Demo.

對於早期版本的jQuery你可以使用這一個：

$(document.body).delegate(btn, 'click', function() { 
    alert('clicked!'); 
}); 

Answer 3

嘗試onjQuery ON

// You are better off just adding a id to the button 

var btn = $("<button id=\"someButton\">Click Here</button>"); 

$(document).on('click', '#someButton', function(){ 
    alert('clicked'); 
}); 

這樣做是增加的點擊收聽到文檔和時間有人點擊它檢查的文件，看是否有event.target === btn

這裏是一個演示

的原因，該事件的不工作是因爲jQuery.html();刪除該事件監聽器是在這裏證實https://github.com/jquery/jquery/blob/master/src/manipulation.js#L231

JSFiddle