Question

我刚试图回答this question。实际上，op已经要求事件不会被克隆元素触发。在查看他的代码时，他使用了.clone（）函数来完成他的任务，

所以我建议使用.clone(true)。 doc表示如果我们在.clone（）函数中将第一个参数传递为true，那么克隆的副本将保留数据及其事件处理程序。但它的行为并非如此。我误解了什么......任何身体都可以引导我朝着正确的方向前进吗？

DEMO

从小提琴中取出的代码，

$('button').on('click', function(){
  $(this).replaceWith('<p>'+ $(this).text() +'</p>');
  $(this).clone(true).appendTo('body');
});

Answer 1

如果您使用.replaceWith()转换.clone()，它将会工作：

$('button').on('click', function(){
  $(this).clone(true).appendTo('body');
  $(this).replaceWith('<p>'+ $(this).text() +'</p>');
});

.replaceWith()将清除绑定到元素的所有事件（如所讨论的here）。在此之后致电.clone()时，无法保留任何事件。

我的猜测是.clone()甚至在调用之前保留了基本html（就像在内部变量中一样）并且.clone(true)检索该值然后绑定事件。

Answer 2

我认为问题来自on方法（看看最后一个例子）。以下代码正在运行：

$(document).on('click', 'button', function(){
  $(this).replaceWith('<p>'+ $(this).text() +'</p>');
  $(this).clone(true).appendTo('body');
});

Answer 3

稍后添加的元素不会响应附加到它们的任何事件处理程序。例如，在您的情况下，您为按钮添加了单击事件。点击它们将用<p>替换它们，并将其克隆添加到正文的底部。但是，当加载DOM时，这个新附加的button不存在，它将不会响应先前定义的单击事件。

现在让他们使用click事件做出响应，即使稍后在DOM中添加它们，您也需要使用live或delegate将事件处理程序附加到按钮元素。但是，live现已弃用，因此应使用delegate。这样，新添加的元素将响应您的点击事件。

查看此代码和fiddle -

$('body').delegate('button', 'click', function(){
  $(this).replaceWith('<p>'+ $(this).text() +'</p>');
  $(this).clone().appendTo('body');
});