Question

我要完成基於jQuery/ajax的用戶界面，並且我遇到了一個小問題：我需要保存所有節點低於<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()去除孩子們從容器裏。

---

根據的，而不是保持到DOM元素及其事件處理程序參照的整體背景下，event delegation可能是一個更好的解決方案。

Answer 3

可能是我誤會了。但是我想當你嘗試再次使用這個DOM元素時，它會有一個重複的id。所以你不能再處理任何事件。我認爲你應該使用類而不是ID。

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

現在你可以用上面的類來處理！