如何在操作後重置DOM？

我的頁面包含一些使用jQuery構建的小嚮導。如何在操作後重置DOM？

我想提供用戶重新啓動/重置嚮導並從開始級別啓動它。

反正沒有刷新頁面呢？

2011-10-06 Yair Nevet

一種方法是clone()精靈的元素樹在它的初始狀態，並將其存儲在一個全局變量或data文檔的：

$(document).data("initialWizard", $("#yourWizard").clone(true));

（注意，傳遞true到clone()也克隆。元數據和事件處理程序，這可能證明你的情況很方便）

然後，當你想還原精靈到原來的狀態，你可以這樣做：

$(document).data("initialWizard").replaceAll("#yourWizard");

來源

2011-10-06 08:46:15

謝謝Frederic。 –

在網上找到最好的清潔解決方案。真棒！ –

重新啓動而不刷新頁面的唯一方法是讓您手動將DOM返回到頁面加載時的狀態並恢復任何javascript狀態。您要麼必須記錄/記住初始狀態，以便您可以回到原始狀態或記錄所有增量更改，以便您也可以返回該狀態。

如果您真的想重新開始，刷新有什麼問題？實現這一

來源

2011-10-06 08:42:03 jfriend00

這也是一個很好的解決方案，但我想避免再次發佈頁面。 –

@Yair - 你爲什麼要避免重新加載頁面？它應該從緩存中加載並且速度非常快。 – jfriend00

@ jfriend00你會如何「記錄」初始狀態？你能用它覆蓋正在運行的DOM嗎？它是否也將對象的狀態（初始事件處理程序等）完全恢復到首次接收時的狀態？ –

與上面類似，這裏是我最終做的。我將整個jQuery文檔內容存儲在bootup（）函數中（並運行它）。正文的初始內容存儲在一個originalDOM變量中。然後在我有一個playAgain函數，將設置正文的內容爲originalDOM，並通過調用bootup（）函數再次運行整個jQuery內容。這可以通過點擊「.startover」類的按鈕來觸發。

bootup(); 
    var bootup = function(){$(document).ready(function(){ 
    var originalDOM=document.body.innerHTML; 
    //jQuery lines of code here 
    var playAgain = function(){ 
     $(".startover").click(function(){ 
      document.body.innerHTML = originalDOM; 
      bootup(); 
     }); 
    }; 
    playAgain(); 

});};

希望能幫助任何尋找類似東西的人，並且如果有什麼我可以改進的地方能夠聽到反饋意見，我很高興聽到！

來源

2015-12-25 18:00:09

如何在操作後重置DOM？

回答

相關問題