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

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

另外，顺便说一句，如果我使用错误的话，我使用的方法可能会导致一些无限递归/泄漏行为......(不是吗？)