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

【问题标题】：On change not working for dynamically added select2更改不适用于动态添加的 select2
【发布时间】：2015-12-23 16:12:54
【问题描述】：

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

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

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

【问题讨论】：

也许把.docType放在引号里
您还需要将该事件绑定到新元素，因为 jquery 选择器仅在加载时查询一次
@thanksd 抱歉，这是一个错字。我确实在代码中的引号中有 .docType
投反对票有什么理由吗？

标签： javascript jquery jquery-select2 select2

【解决方案1】：

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

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

【讨论】：

我是这样写的

【解决方案2】：

使用“on”方法委托事件。这将为动态生成的元素添加一个处理程序。

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

 //Your code
}

on method definition

【讨论】：

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

【讨论】：

正确。该文档是正在监视更改的内容，on 方法采用 3 个参数，它在 document 上查找的事件类型，范围（文档）正在寻找更改的元素，以及处理函数本身。不确定当你说“上面的答案”时你是不是在跟我说话，但我想扩展我的回答以防万一。
是的，我只是在解释为什么它可以正常工作，以便发帖者能够理解。在诸如$('.my-element').on('change', function() { } ); 之类的分类选择上使用on 处理程序不会让他到达他需要的位置。第二个参数是让它正常运行的原因。

【解决方案4】：

我认为您需要在触发更改方法之前为所有选择元素调用 find() 方法，如下所示

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

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

【讨论】：