我有一个带有表格的DIV。当用户提交表单并成功提交时,我会用简单的“一切都很好”消息替换表单:
$("#some_div").html("Yeah all good mate!");
是否有一种很好的方法可以根据已经到达的HTML将div“重置”为“原始状态”?我只能想到实际做这样的事情:
//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);
它看起来不是很优雅 - 我想有更好的解决方案,不是吗?
我会克隆元素,而不是保存内容。然后使用replaceWith恢复它:
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
您可以使用data属性来保存状态而不是变量
$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));
你所做的并不是最佳的。最好的解决方案是:
当表单成功提交时,只需要hide()
表单元素,然后show()
表示消息(最初是隐藏的)。然后,后来,只是show()
的FORM元素和hide()
的消息。
是的,你的方式是做到这一点的方式。 DOM不保存以前的DIV状态,因此您需要自己保存。
有点优雅吗?
var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);
在我看来,最好是使用这个:
var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());
这样,您可以重复使用此操作将div恢复为原始状态,同时保持“originalState”中的数据不变。为我工作。
你基本上有三种选择。
originalState
变量一样。$.ajax()
方法获得服务器端代码,则可以轻松完成此操作。在jQuery中调用empty
函数就可以了
$(".div").empty();
这是我在这个网站上的第一次互动 - 我还不能发表评论,但这是@ Fleuv对@Josiah Ruddell回答的评论:
.clone()
的默认参数是“false”,它不会克隆事件侦听器。如果你使它成为.clone(true)
它也会克隆事件监听器。我已经测试了它(其余的答案)并且它有效。