为什么在重新追加元素时点击事件不起作用？

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