2

我正在尝试创建一个重置按钮以在操作后将 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');
});

例子

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

4

2 回答 2

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 对此的看法，因为我不确定隐含的内部机制（如果之后我们修改原始元素，为什么克隆元素的数据会消失？真的吗？消失？...）

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

于 2013-10-02T16:32:42.063 回答
0 
 $(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);
 });

演示

于 2013-09-24T20:52:06.750 回答