5

我想将 DOM 重置为原始状态，然后再次对其进行操作。

我发现最好的方法如下：

// Clone the Dom and assign it to a variable
divClone = $("#document").clone();

// .... More Code ......

// When required, replace the DOM with with the cloned variable. 
       $("#document").replaceWith(divClone);

唯一的问题是您无法再次操作新重置的 DOM。

我整理了一个JSFiddle，它使用了一个添加类的简单示例。您可以单击“测试”链接添加一个类。然后，您可以单击“重置”将 DOM 返回到其原始状态。但是，如果您再次单击“测试”链接，则不会再向恢复的 DOM 添加更多类。（显然，这只是一个简化的示例。有更好的删除和添加类的方法）。

如何操作恢复的 DOM？

4

1 回答 1

5

您的代码按预期工作，问题是您克隆的 DOM 没有绑定到它的处理程序。

您有 2 个选项，第一个是在绑定所有处理程序后克隆，传递true给withDataAndEvents clone方法参数：

$(".test").click(function() {
    $("#document").addClass("green");
});

$(".reset").click(function() {
    $("#document").replaceWith(divClone.clone(true));
});

var divClone = $("#document").clone(true);

小提琴

第二种选择是使用事件委托。

var divClone = $("#document").clone();

$(document).on('click', '.test', function() {
    $("#document").addClass("green");
}).on('click', '.reset', function() {
    $("#document").replaceWith(divClone.clone());
});

小提琴

第二种方法的缺点是所有事件都必须冒泡到文档级别，并且您无法取消冒泡event.stopPropagation()。

编辑：更新了用克隆的克隆替换的答案，以便原始克隆在初始状态下始终保持安全，并且可以作为以后重置的基础。

于 2012-11-11T16:48:59.377 回答