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

我试图创建一个重置按钮，以便在操作后将DOM设置回其初始状态。第一次使用时完美，但使用后，一旦再次操作DOM，我无法重置。将元素的初始状态存储在变量中

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

HTML

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

$('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

的初始化状态的价值似乎仍然表现出后的第一个调用正确的值，但我不能取回。无论示例重置了多少次，是否有办法让这项工作成为可能？

来源

2013-09-24 jessback

你想要做什么？ – gdoron

我相信你已经简化了你的代码到这个裸骨格式，但是如果你没有，这是问题，那么你可以用稍微不同的设置来改变文本http://jsfiddle.net/rk6pm/2/ – Huangism

看起来像一个非常糟糕的主意，但这里是你如何做到这一点 - > http://jsfiddle.net/rk6pm/3/ – adeneo

$(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

来源

2013-09-24 20:52:06

这不会像'.clone（true）'那样复制数据和事件。 – Barmar

我试过了解决方案，但@Barmar是正确的，我需要将事件复制过来。 – jessback

我想我固定它。您可以在http://jsfiddle.net/rk6pm/8/

它看起来像某种原因（这是很不起眼的我），$(document).data勾选更新jfiddle持有$('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亲Dev的opionion这个，因为我不知道在其上隐含的内部机制（为什么，如果以后我们修改克隆元素的数据消失原来的元素？它真的消失了吗？...）

此外，在一个侧面说明，它可能是我使用的方法，如果使用错误（我:) :)？可能会导致一些无限递归/泄漏的行为...（不是吗？）

来源

2013-10-02 16:32:42

这种解决问题并不是真的。例如，如果您不止一次单击小提琴中的处理程序，则您已经克隆了DOM的已更改状态。使恢复不可能。我很好奇为什么这些数据不仅仅保留了下来...... – jessback

当然，这当然是一个例子，你不应该搞砸它:)当然，在一个网页中，稍微多一点复杂的代码，你可以实现一种避免这种情况的方法。是的，正如我所说的document.data保留背后的机制尚未完全理解.. –

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

回答

相关问题