使用Jquery重置Dom,然后再次操作它

我想将DOM重置为原始状态,然后再次操作它.

我发现the best way to do this如下：

// 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？

解决方法

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

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

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

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

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

Fiddle

第二个选项是使用event delegation.

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

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

Fiddle

第二种方法的缺点是所有事件都必须冒泡到文档级别,然后您无法使用event.stopPropagation()取消冒泡.

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