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

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