3

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

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

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

4

4 回答 4

5

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

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

于 2015-12-23T16:21:04.430 回答
3

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

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

 //Your code
}

关于方法定义

于 2015-12-23T16:24:11.153 回答
0

如果您的元素是动态加载的，您将需要使用类似于下面的内容。例如，假设您通过 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 事件的第二个参数）。

于 2015-12-23T16:24:49.047 回答
0

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

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

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

于 2015-12-23T16:47:01.117 回答