4

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

为什么当我重新附加元素（按钮）时单击事件不起作用，我该如何解决？

4

3 回答 3

6

查看以下文档.html()：

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

holder.html("");正在删除按钮的处理程序。如果你想保留它，你可以clone用作：

holder.append(btn.clone(true));
holder.html("");
holder.append(btn.clone(true));
于 2013-07-13T11:05:09.350 回答
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

于 2013-07-13T11:02:52.363 回答
1

使用事件委托：

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

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

演示。

对于早期版本的 jQuery，你可以使用这个：

$(document.body).delegate(btn, 'click', function() {
    alert('clicked!');
});
于 2013-07-13T11:02:49.743 回答