JQuery -切换UI部分的最佳方式

JQuery - best way to swap in and out parts of the UI

本文关键字:最佳 方式 切换 UI JQuery      更新时间:2023-09-26

"保留"answers"重新显示"html页面的部分,以及您设置的jquery事件处理程序的最佳方法是什么?

更多细节:

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

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

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

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

我曾想过只是使用jquery的。html()来获取和设置页面的参数部分,但我认为这不会保留我为这些控件设置的任何事件处理程序。对吗?在这种情况下,当用户在计算之间切换时,我需要重新连接事件处理程序,或者做其他事情。

(在本质上,我认为我想做的是能够保留一块dom(希望包括jquery事件处理程序),但我不写大量的jquery和我不确定如何接近…我想知道,如果我能得到一个页面的整个参数部分表示为一个jquery节点,并保存(到一个js变量),并恢复它,根据需要,如果这样做的技巧?

谢谢你的建议!迈克尔。

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

为第一个计算元素添加calculation-1类,为第二个计算元素添加calculation-2类。这将使您通过$('.calculation-1')$('.calculation-2获得所有计算1和2元素的jQuery变量。

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


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

还可以使用detach(),它将从DOM中删除元素,但保留添加的事件处理程序。但是,如果您的元素遍布DOM,则很难跟踪它们的原始位置,并且TBH的工作比它的价值更多。