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

Question

我想将 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？

Answer 1

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

您有 2 个选择，第一个是在绑定(bind)所有处理程序后进行克隆，将 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() 取消冒泡。

<小时/>

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