如何實例化一個具有特定類的所有元素上的JS小部件創建時

Question

我有一個動態構建的頁面，它通過ajax引入了許多元素。我想爲select2插件使用特定的下拉菜單，這是一個局部視圖，可以通過ajax加載到頁面的多個不同區域，特別是當用戶單擊按鈕在頁面上添加新元素時。我決定通過實例化select2類的所有實例來處理這個問題。

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

與上面的代碼的問題是，.select2()調用生成頁面上的新元素，這是冒泡而引起更多的調用makeSelect2。基本上，我陷入了無限循環。

我在網上發現了一些使用livequery的例子，但這些例子似乎已經過了幾年，並且livequery在一年內還沒有更新。

感謝

Answer 1

我有類似的問題，並通過選擇只有select標籤解決，並添加一個類，一旦他們初始化，他們將作爲一個標誌，知道是否要調用select2函數：

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

Answer 2

您可以綁定到後一個Ajax事件成功完成，也就是說，success事件處理程序執行時被觸發ajaxSuccess事件。

$(document).ajaxSuccess(function(){ 
    $('.select2').each(makeSelect2); 
}); 

但是它的效率更高，以實例化它們在success處理程序本身。