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

时间:2013-07-13 10:59:34

标签: javascript jquery

为什么点击事件在此代码中不起作用(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');});

with(不再工作):

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

如果我不使用jquery并设置这样的javascript事件,它工作正常!!

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

当我重新添加元素(按钮)时,为什么点击事件不起作用?我该如何解决?

3 个答案:

答案 0 :(得分:6)

查看documentation of .html()

  

当.html()用于设置元素的内容时,任何内容都是   在该元素中完全被新内容所取代。   此外,jQuery删除了其他构造,如数据和事件   在用这些元素替换之前,来自子元素的处理程序   新内容。

holder.html("");正在删除按钮的处理程序。如果您想保留它,可以使用clone作为:

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

答案 1 :(得分:3)

尝试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

答案 2 :(得分:1)

使用event delegation

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

您的代码不起作用,因为当首次加载脚本时,它会将该函数绑定到该特定元素,但是当您添加另一个脚本时,脚本不会再次运行,因此附加元素不会将其事件绑定。当我们添加事件委托时,我们会定位document.body,因此当脚本加载时,事件会绑定到body上的该元素。

Demo.

对于早期版本的jQuery,您可以使用以下版本:

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