javascript - 创建时如何在具有特定类的所有元素上实例化JS小部件

我有一个动态构建的页面，该页面通过ajax引入了许多元素。我想对特定下拉列表使用select2插件，该插件处于部分视图中，并且可以通过ajax加载到页面的多个不同区域中，特别是当用户单击按钮以在页面上添加新元素时页。我决定通过实例化所有select2类实例来解决此问题。

    function makeSelect2(){
        $(this).select2();
    }
    $('.select2').each(makeSelect2);
    $('body').on('DOMNodeInserted','.select2', makeSelect2);

上面的代码的问题是.select2()调用正在页面上生成新元素，这些元素正在冒泡并导致对makeSelect2的更多调用。本质上，我陷入了无限循环。

我在网上找到了一些使用livequery的示例，但这些示例似乎已经使用了几年，并且livequery一年没有更新过。

谢谢

最佳答案

我遇到过类似的问题，可以通过只选择select标记，并在初始化后向它们添加一个类来解决，该类将作为标记来知道是否调用select2函数：

function makeSelect2(){
    if ($(this).hasClass('select2Init')) return;
    $(this).addClass('select2Init').select2();
}
$('select.select2').each(makeSelect2);
$('body').on('DOMNodeInserted','select.select2', makeSelect2);