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

Question

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

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？

- big_smile

如果您将类添加到divClone中，它是否有效？ - thedayofcondor

@thedayofcondor 这些类只是一个简化的例子。我的实际页面有几个脚本，所以我不想重复包含这些脚本（即我不想为原始DOM和已经重写以便在克隆DOM上工作的第二组脚本编写一组脚本）。 - big_smile

我的意思是，如果它在副本上运行，则意味着 $（“#document”）指的是旧版本。您可以尝试重组脚本并拥有2个副本，“原始”和“新”，d $（“#document”）.replaceWith（new）;，而不是使用$（“#document”），并且要重置它只需交换变量。 - thedayofcondor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrício Matté · Accepted Answer

你的代码按预期工作，问题在于你克隆的DOM没有绑定处理程序。

你有两个选择，第一个是在所有处理程序绑定后克隆，将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());
});

Fiddle

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

编辑：更新答案，用克隆的克隆替换，这样原始克隆始终保持初始状态，并可作为以后重置的基础。