Question

我要完成基于jQuery / ajax的UI，我有一点问题：我需要保存<div id="mainpanel">以下的所有节点，但要保留与它们相关的事件，所以我可以与此进行交互以前的DOM。

让我们说这个DOM：

<div id="mainpanel">
    <a href="#" id='firstopt'>First option</a>
    <a href="#" id='secopt'>Second option</a>
</div>

我有#firstopt和#secopt的点击处理程序。如果我单击其中一个，在下一步中我希望能够返回并拥有完全相同的DOM。通过简单地保存当前的DOM我能够实现的部分原因是我希望能够回到：

var currentDom=$('#mainpanel').html();

并在需要时恢复：

$("#mainpanel").html(currentDom);

现在在上面的步骤之后，我有第一个DOM，但是没有附加到下面节点的每个事件。如何保存它们？

Answer 1

使用jQuery中的.detach（）函数并存储返回值：

var elements = $(".someSelector").detach();

然后重新添加它们：

$(".container").append(elements);

这应该保留所有与jquery相关的事件。

Detach API

Answer 2

不是将DOM序列化为HTML（一个将丢失事件处理程序绑定的过程），而是保持对节点的引用：

var currentDom = $('#mainpanel').children();
$("#mainpanel").empty().append(currentDom);

另请查看.detach()以便从容器中删除子项。

根据整体上下文，event delegation可能是更好的解决方案，而不是保留对DOM元素及其事件处理程序的引用。

Answer 3

可能是我被误解了。但我认为当你再次尝试使用这个DOM元素时，它会有一个重复的id。所以你再也无法处理任何事件了。我认为你应该使用class而不是ID。

<div id="mainpanel">
    <a href="#" id='firstopt' class='yourClass'>First option</a>
    <a href="#" id='secopt' class='yourClass'>Second option</a>
</div>

现在你可以用上面的课来处理了！

如何将DOM与附加事件一起保存？

3 个答案: