更改不适用于动态添加的 select2

Question

我有一些代码可以创建带有 select2 元素的手风琴，该元素有一个 class 称为 docType。我还有 jquery 代码在选择 jquery 元素的值时触发事件。虽然这适用于页面加载时已存在的 select2 元素，但它不会触发动态添加的元素。这是我的更改代码：

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

有谁知道为什么这种方式不起作用？

Answer 1

对动态添加的元素使用事件委托。

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

Answer 2

我们使用 'on' 方法来委托事件。这将为动态生成的元素添加处理程序。

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

 //Your code
}

on method definition

Answer 3

如果您的元素是动态加载的，您将需要使用类似下面的内容。例如，假设您通过 AJAX 或类似以下输入元素的方式动态生成：

<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' 处理程序。这里的实际技巧是将处理程序放在文档上，因为它始终存在，而不是像上面那样放在元素或元素 class 上。它是 document 上的处理程序，寻找 class（on 事件的第二个参数）的元素来完成您正在寻找的工作。

Answer 4

我认为您需要为所有 select 元素调用 find() 方法，然后再触发如下所示的更改方法

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

如果不起作用，请尝试 JQuery 而不是 $.

更改不适用于动态添加的 select2

On change not working for dynamically added select2

javascript

jquery

jquery-select2

select2