為什么在重新追加元素時點擊事件不起作用？

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

查看.html()的文檔 ：

當.html（）用於設置元素的內容時，該元素中的任何內容都將被新內容完全替換。 此外，在使用新內容替換這些元素之前，jQuery會從子元素中刪除其他構造（如數據和事件處理程序）。

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

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

Answer 2

嘗試on jQuery的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

Answer 3

使用事件委托 ：

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

您的代碼不起作用，因為當首次加載腳本時，它會將該函數綁定到該特定元素，但是當您添加另一個腳本時，腳本不會再次運行，因此附加元素不會將其事件綁定。 當我們添加事件委托時，我們以document.body目標，當腳本加載時，事件被綁定到body上的該元素。

演示。

對於早期版本的jQuery，您可以使用以下版本：

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