javascript - JQuery - 换入和换出 UI 部分的最佳方式

Question

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

更多细节:

我正在编写一个“单页 JavaScript 应用程序”，它允许用户执行两种不同的计算。用户通过单击单选按钮来选择他们想要的计算。

当他们单击单选按钮 A 时，UI 的很大一部分需要显示适当的 html 控件(和 jquery 事件处理程序)，以允许用户输入计算 A 的参数。

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

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

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

(本质上，我认为我想做的是能够保留一 block dom(希望包括 jquery 事件处理程序)，但我不写大量的 jquery，我不知道如何为了解决这个问题...我想知道是否可以获得表示为 jquery 节点的页面的整个参数部分，并将其保存(到 js 变量)并根据需要恢复它，如果这可以解决问题??

感谢您的任何想法!迈克尔

Answer 1

老实说，通常 hide()/show() 元素比删除/重新添加它们更容易。

将 calculation-1 类添加到您希望对第一个计算可见的元素，并为第二个计算元素添加 calculation-2 。这将让您通过 $('.calculation-1') 和 $('.calculation-2) 获得所有计算 1 和 2 元素的 jQuery 变量。

然后，您可以为 radio 添加一个事件处理程序，相应地 hide() 和 show() 元素。

<小时/>

如果您使用html()，您将丢失绑定(bind)到子元素的事件。 除非您将处理程序附加到您不删除的祖先。

您还可以使用detach() ，这将从 DOM 中删除元素，但保留您添加的事件处理程序。但是，如果您的元素遍布 DOM，则很难跟踪它们的原始位置，而且说起来，付出的努力得不偿失。