Question

我正在尝试创建一个重置按钮，以便在操作后将DOM设置回其初始状态。首次使用时效果很好但使用后，再次操作DOM后我无法重置。

也就是说，点击下面示例中的“重置”后，它第一次运行但不是第二次运行。

HTML

<p>some text</p>
<button class="reset">RESET</button>
<button class="change">Change DOM</button>

JS

$('button.change').on('click', function (){
  $('p').text('some new text');
});

$(document).data('initialState', $('p').clone(true));

$('button.reset').on('click', function (){
  $(document).data('initialState').replaceAll('p');
});

Example

在初次调用后，initialState的值似乎仍显示正确的值，但我无法检索。无论重置示例多少次，有没有办法让这项工作成功？

Answer 1

我想我修好了。您可以在http://jsfiddle.net/rk6pm/8/

查看更新的jfiddle

由于某些原因（对我来说非常模糊）看起来像这样，在再次修改$(document).data后，保留$('p')的克隆数据的$('p')不会被保留。

这可能是因为某些内部jQuery行为，或者因为js GC的工作方式。

所以我所做的就是将数据克隆/存储函数移动到对象的单击处理程序中，以便在任何其他操作元素的函数之前进行克隆/存储，以便它将克隆并重新存储元素（和它的处理程序）在$(document).data中。

$('p').on('click', function (){
    $(document).data('initialState', $('p').clone(true));
    $(this).text('some new text');
});

$('button').on('click', function (){
  $(document).data('initialState').replaceAll('p');
});

它解决了这个问题，但我真的很想听到一些js pro dev的观点，因为我不确定隐含的内部机制（为什么克隆元素的数据会在之后修改原始元素时消失？它真的消失了吗？...）

另外，在旁注中，可能是我使用的方法，如果使用错误（我是:)？）可能导致一些无限递归/泄漏行为......（不是吗？）

Answer 2

 $(document).data('initialState', $('p').clone(true));

 $('button.reset').on('click', function (){
    $(document).data('initialState').replaceAll('p');
 });

替换为：

 var initialState = $('p').html();

 $('button').on('click', function (){
    $('p').html(initialState);
 });

DEMO

将元素的初始状态存储在变量中

2 个答案: