更改無法用於動態添加select2

我有一些代碼可以創建一個具有名爲docType的類的select2元素的手風琴。我也有jQuery代碼來觸發選擇jquery元素的值的事件。雖然這適用於頁面加載中已存在的select2元素，但它不會觸發動態添加的元素。這是我的更改代碼：更改無法用於動態添加select2

$('.docType').on('change', function() { 
    // the code inside should be firing for dynamically added elements 
}

有沒有人知道爲什麼這種方式不工作？

來源

2015-12-23 NiallMitch14

可能會將'.docType'放在引號中 – thanksd

您還需要將該事件綁定到新元素，因爲jquery選擇器僅在加載時被查詢一次 –

@thanksd對不起，這是一個錯字。我確實有代碼 – NiallMitch14

使用事件委託來動態添加元素。

$(document).on("change",".docType", function() {

來源

2015-12-23 16:21:04 Krishna

我正在寫這種方式只有這個委派工作的所有元素，但不是在select2 –

我們的 '上' 的方法來委派事件。這將爲動態生成的元素添加一個處理程序。

$(document).on("change",".classnameyouarewatching", function() { 

//Your code 
}

on method definition

來源

2015-12-23 16:24:11 Korgrue

如果你的元素被動態加載，你需要使用更多的東西一樣有什麼下文。例如，假設您是通過AJAX或類似的東西，動態地生成以下input元素：

<input type="text" class="text_element" value="some value">

將事件處理程序添加到該元素嘗試使用JS是這樣的：

<script type="text/javascript"> 
$(document).on('change', '.text_element', function() { 
    console.log('Element with class "text_element" has changed'); 
    console.log('New value is: ' + $(this).val()); 
}); 
</script>

答案是以上正確，但它不僅僅是委託處理動態生成的DOM元素的'on'處理程序。這裏的實際技巧是將處理程序放置在文檔上，因爲它始終存在，而不像上面那樣是元素或元素類。它是文檔的處理程序，用於查找一個類的元素（on事件的第二個參數），以便完成您正在查找的工作。

來源

2015-12-23 16:24:49

正確。該文檔是正在觀察變化的內容，「on」方法需要3個參數，它在「文檔」中查找的事件類型，範圍（文檔）正在尋找更改的元素以及處理函數本身。不知道當你說「上面的答案」時你是否正在跟我說話，但我想擴大我的反應以防萬一。 – Korgrue

是的，我只是解釋了爲什麼這個工作正常，所以海報可以理解。在''（'change'，function（）{}）;''上使用'on'處理程序對分類選擇（如'$（'。my-element'）。'）'將不會在他需要的地方得到他。那第二個參數是什麼使它能夠正確地打勾。 –

我覺得你需要射擊的調整方法如下圖所示

$(".docType").find(":select").on(("change", function() { // the code inside });

如果它不能正常工作，請嘗試而不是$的JQuery之前調用find（）方法對所有的選擇元素。

來源

2015-12-23 16:47:01 imtiyaz

更改無法用於動態添加select2

回答

相關問題