Javascript JQuery—交换UI部分的最佳方式

“保留”和“重新显示”html页面的部分以及您设置的jquery事件处理程序的最佳方式是什么

更多详情：

我正在编写一个“单页javascript应用程序”，允许用户执行两种不同的计算。用户通过单击单选按钮选择所需的计算

单击单选按钮A时，UI的很大一部分需要显示相应的html控件（和jquery事件处理程序），允许用户输入计算A的参数

同样，如果用户单击单选按钮B，则页面的该部分需要显示允许用户输入计算B参数的所有控件（及其关联的jquery事件处理程序）

我的问题是如何最好地处理计算A和B的html控件及其关联的jquery事件处理程序的交换

我曾想过只使用jquery的.html（）来获取和设置页面的参数部分，但我认为这不会保留我为这些控件设置的任何事件处理程序。是这样吗？在这种情况下，我需要在用户在计算之间切换时重新连接事件处理程序，或者执行其他操作

（本质上，我认为我想做的是能够保留dom的一块（希望包括jquery事件处理程序），但我没有编写大量jquery，我不知道如何实现这一点……我想知道是否可以将页面的整个参数部分表示为jquery节点，并将其保存（保存到js变量中）并根据需要恢复它，如果这样做可以奏效的话

谢谢你的建议！

---

Michael

老实说，通常只隐藏（/

show（）

元素比删除/重新添加元素更容易

将

calculation-1

类添加到第一个计算中要可见的元素，并将

calculation-2

添加到第二个计算元素中。这将允许您通过

$（'.calculation-1'）

和

$（'.calculation-2

）获取所有计算1和2元素的jQuery变量

然后，您可以为收音机添加一个事件处理程序，相应地

hide（）

和

show（）

元素

---

如果使用

html（）

，将丢失绑定到元素子元素的事件。除非将处理程序附加到不删除的祖先

---

您也可以使用，它将从DOM中删除元素，但保留您添加的事件处理程序。但是，如果您的元素分布在整个DOM中，则很难跟踪它们的原始位置，而且TBH付出的努力远远超过了它的值。

使用

.clone

？但是您确定需要保留确切的副本还是可以重新加载它？目前，我并不打算每次用户在计算类型之间切换时（即通过ajax）从服务器上重新加载页面的“参数部分”。相反，我希望为我的JS页面提供它所需的一切（即用户首次浏览该页面时）和两个“html块”表示每个计算，将保存在java脚本变量中，以便“插入”用户选择一个calc或另一个calc时的页面..并希望保留任何用户输入的值和我设置的jquery事件处理程序..我只需隐藏/显示，然后，正如Matt所建议的，除非有令人信服的理由不这样做。分离可能很好。在我的情况下，我的参数控件不会分散在整个DOM中..我有一个专用的DIV充当所有参数的父级。选择radio a时，该div的内容将填充代表calc a的控件“树”。如果选择radio B，则该div将重新填充calc B的控件树。@MichaelRayLovett:在这种情况下，

detach（）可以工作；但仍然需要保存变量中的元素，以便稍后恢复它们（如你在你的问题中提到的）。我仍然会考虑<代码> HIDED（）：<代码> >“代码”> /[代码> >）。因此，在你的HID（）/Suffor（）中，页面最初会填充两组参数段。（例如，每个都包含在一个div中）它们都是某个父div的子div。