将动态表单恢复为其初始状态

Question

我正在研究基于jQuery的遗留项目。有一个搜索（过滤器）表单，可以在用户与之交互时动态构建。 “动态构建”是指创建一些HTML元素（select，input，radio按钮）并通过播放现有选择将它们即时插入表单中。已经有功能允许用户擦除从初始页面加载中创建和存在的所有元素。

现在，我需要将表单状态完全恢复到页面加载时的状态。通过使用actual.parentNode.replaceChild(initial, actual)将初始形式的状态克隆为常量，可以轻松实现该目标。问题是我丢失了现有表单元素的所有事件处理程序。表单不再是交互式的。

有人可以建议一种用于实现上述要求的方法吗？

Answer 1

您可以仅将特定的类添加到所创建的所有元素中，然后在要重置表单时使用：

$(".your_custom_class_here").remove()

删除所有创建的元素

Answer 2

尝试使用jquery重新加载表单：

 $( "#form" ).load(window.location.href + " #form" );

您还应该将事件处理程序更改为委托处理程序，而不是使用

$("#element").on("click", function() {...});

您应该使用：

$(document).on("click", "#element", function() {...});

因此，新元素和重新加载的元素可以与这些事件处理程序一起使用。