如何在jquery中阻止小部件的多个单元？

Question

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

e.g。 $('.myClass').widget();

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

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

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

有更好的方法吗？

Answer 1

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

添加一个名为myClass-init

的新类

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

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

Answer 2

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

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

Answer 3

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

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