“我怎么能？”；重置"&书信电报；部门>；在被JavaScript修改后恢复到其原始状态？

我有一个有表格的DIV。当用户提交表单并成功提交时，我会将表单替换为一条简单的“现在一切都好了”消息：

有没有一种好方法可以根据它附带的HTML将div“重置”为其“原始状态”？我只能想到实际做这样的事情：

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);

---

它看起来不太优雅-我想有更好的解决方案，不是吗？

是的，你的方式就是这样做的方式。DOM不保存div以前的状态，因此您需要自己保存它。

您基本上有三个选项

记住您的原始标记，就像您使用上面的

originalState

变量一样

使用AJAX重新请求标记。如果使用jQuery中的

$.ajax（）

方法编写服务器端代码，则可以轻松完成此任务

使页面重新加载

---

可以使用“数据”属性来保存状态，而不是变量

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));

---

我将克隆元素，而不是保存内容。然后使用以下命令将其还原：

var divClone = $("#some_div").clone(); // Do this on $(document).ready(function() { ... })

$("#some_div").html("Yeah all good mate!"); // Change the content temporarily

// Use this command if you want to keep divClone as a copy of "#some_div"
$("#some_div").replaceWith(divClone.clone()); // Restore element with a copy of divClone

// Any changes to "#some_div" after this point will affect the value of divClone
$("#some_div").replaceWith(divClone); // Restore element with divClone itself

稍微优雅一点

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);

---

你所做的不是最佳的。最好的解决办法是：

---

当表单成功提交时，只需

hide（）

表单元素和

show（）

消息（最初是隐藏的）。然后，稍后，只需

show（）

表单元素和

hide（）

消息。

在我看来，最好使用以下方法：

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

通过这种方式，您可以重复使用它将div恢复到原始状态，同时保持数据处于“originalState”的完整状态。

---

为我工作。

在jQuery中调用

empty

函数就可以了

$(".div").empty();

---

这是我在这个网站上的第一次互动——我还不能发表评论，但这是@Fleuv对@Josiah Ruddell答案的评论：

.clone（）

的默认参数为“false”，它不会克隆事件侦听器。如果设置为

.clone（true）

，它也会克隆事件侦听器。我已经测试过了（和他剩下的答案一起），它是有效的

---

我认为你所展示的是最好的方法。设置元素的HTML后，它以前的内容将被销毁。因此，在销毁它之前，您必须自己存储它。

html（）

重写是胡说八道。只需使用

show（）

和

hide（）

切换表单和消息元素的显示。嗯，这有多大好处？我的意思是-为什么这不是最佳的-显示/隐藏更好多少？@abolotnov将表单元素写入字符串将破坏绑定在该表单或其任何祖先元素（如表单字段）上的所有事件处理程序。以编程方式对表单元素或任何祖先所做的所有其他更改也将丢失。HTML重写是一个可怕的想法。@ŠimeVidas您对使用.clone（true，true）的想法是什么？它还将克隆数据和事件处理程序，并且也将为克隆元素的所有子元素（根据jQuery API文档）执行此操作。@jj_uu在什么上下文中？关于OP所面临的用例，或者如您的示例所示，万一你想克隆一个表单元素。不知道replaceWith，很好！在最后一步中，是否有方法不更改divClone的值？这不会克隆事件侦听器，经过测试的克隆将删除所有

jquery

事件功能。我将此用于AJAX和动态创建的按钮，这是唯一对我有效的答案。也许你的答案是正确的。但这将被认为是低质量的答案，因为它只包含代码。请添加一些解释，说明这将如何解决问题。

$(".div").empty();

var originalState = $("#some_div").clone(true, true);
$("#some_div").replaceWith(originalState.clone(true, true));