如何防止在 jquery 中多次初始化一个小部件？答案

【问题标题】：How do I prevent multiple inits of a widget in jquery?如何防止在 jquery 中多次初始化一个小部件？
【发布时间】：2011-07-21 13:15:04
【问题描述】：

假设我有一个名为 widget 的 jquery 插件，它可以用于多个元素

例如$('.myClass').widget();

页面加载后，我将动态添加 HTML，其中包含更多具有 myClass 类的元素。如果我再次运行上面的代码，之前加载的小部件将再次被初始化。

我想出的一个解决方案是在小部件初始化后删除 myClass 类。

另一个想法是使用.data() 并存储一个初始化标志，在插件加载时检查它是否存在。

有更好的方法吗？

【问题讨论】：

我个人认为动态加载 HTML 很难清晰地分离 UI 和后端。我更喜欢动态加载数据并将所有 UI 及其逻辑（包括必要时的 HTML 创建）保留在 HTML 页面中。这往往会解决这样的问题。
如果您发现我的回答对您有帮助，请投票并将其标记为答案。谢谢！

【解决方案1】：

我想说的是在初始化时添加一个新类，并使用 not 选择器排除具有该类的元素。

//Only will work once per element, no matter how many times you run it.
$('.myClass').not('.initialized').widget().addClass('initialized');

【讨论】：

【解决方案2】：

$(".myClass-init").widget().removeClass(".myClass-init")

添加一个名为myClass-init的新类

这意味着您可以继续使用 myClass 进行 CSS 样式设置，并且仅使用单独的新类来实现功能。

您可以使用data- 属性，但这些属性的选择器速度较慢。这是一个问题，你是否认为data- 属性比额外的class 更具语义

【讨论】：

【解决方案3】：

jQueryUI 小部件框架会生成伪选择器，因此如果您的小部件名为“myWidget”，您可以使用此行来测试它是否已初始化：

$("#element").is(":ui-myWidget")

【讨论】：