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

Why click event don`t work when re-append element?

本文关键字：元素 单击 事件 不起作用 追加 新追加 为什么      更新时间：2023-09-26

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

当我重新附加元素（按钮）时，为什么点击事件不起作用？我如何修复它

查看.html():的文档

当使用.html（）设置元素的内容时在该元素中被新内容完全取代。此外，jQuery还删除了数据和事件等其他构造处理程序，然后将这些元素替换为新内容。

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

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

在上尝试onjQuery

// 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

使用事件委派：

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

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

演示。

对于jQuery的早期版本，您可以使用以下版本：

$(document.body).delegate(btn, 'click', function() {
    alert('clicked!');
});
相关文章：