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

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');
});

例

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 开发人员对此的看法，因为我不确定所暗示的内部机制(如果之后我们修改原始元素，为什么克隆元素的数据会消失？它真的消失了吗？...)

另外，附带

说明一下，我使用的方法，如果使用错误(我:)吗？(可能会导致一些无限递归/泄漏行为......(难道不行吗？

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);
 });

演示