Question

我有一些代码可以创建一个带有select2元素的手风琴，该元素有一个名为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>

上面的答案是正确的，但不只是'on'处理程序委托动态生成的DOM元素的处理。这里的实际技巧是将处理程序放在文档上，因为它总是存在，而不是像上面那样的元素或元素类。它是文档中的处理程序，查找一个类的元素（on事件的第二个参数），它可以完成您正在寻找的工作。

Answer 4

我认为你需要在触发改变方法之前为所有select元素调用find（）方法，如下所示

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

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

在更改时无法动态添加select2

4 个答案: