HTML DOM NODE 丢失事件答案

【问题标题】：HTML DOM NODE lost EventsHTML DOM NODE 丢失事件
【发布时间】：2013-01-29 01:08:00
【问题描述】：

当我将一些 dom 节点从一个上下文移动到另一个上下文时，所有一些子节点都失去了它们的事件侦听器。

HTML

<div><lots of deep nodes .../><div>
<div>
   <div>
     <div#newNode></div>
   </div>
</div>

nodes = $('div').find('nodes')
$('#newNode').html(nodes)

移动后...所有移动的节点都丢失了它们的事件。

有什么想法吗？

【问题讨论】：

【解决方案1】：

您正在复制 html，它没有任何事件信息。

$('.whatToCopy').clone(true).appendTo('#NewLocation');

【讨论】：

如果是这样的话$('#newNode').empty().append(nodes)呢？
我已经尝试了所有这些.. 似乎事件转到文档而不是克隆节点。例如，其中一个克隆节点是引导日期选择器。当我将克隆节点移动到新的 Parent#Node 时，日期选择器出现在左上角。 :(

【解决方案2】：

重构或复制 HTML 会生成全新的 DOM 元素，这些元素没有任何先前节点的事件监听器（这些元素是从头开始创建的，就像页面中的原始 HTML 创建的元素没有事件监听器一样）。因此，很自然，除非您运行新代码向它们添加事件监听器，否则它们不会有任何 jQuery 事件监听器。

如果您想移动节点，您可以直接将 DOM 元素移动到 DOM 中的不同位置，而无需使用 HTML（因此无需创建新的 DOM 元素），这样所有事件侦听器都会保持连接状态。例如移动它们：

nodes = $('div').find('nodes');
$('#newNode').append(nodes);

如果您想复制附加了事件监听器的节点，那么您可以使用.clone(true, true)，它将克隆带有数据和事件的节点并进行深度克隆（包括子节点）：

nodes = $('div').find('nodes');
$('#newNode').append(nodes.clone(true, true));

【讨论】：

【解决方案3】：

尝试在$('#newNode') 上使用附加或前置。 .html() 重新创建标签，这样你就失去了所有的事件和东西

【讨论】：