Question

我使用jquery动态创建了一些下拉列表。

并且.change()函数不会触发那些动态创建的下拉列表。

JS代码

$(document).ready(function() {
    var data = {
        1:['Five', 'Six', 'Seven'],
        2:['Eight', 'Nine', 'Ten'],
        3:['Eleven', 'Twelve', 'Thirteen'],
        4:['Fourteen', 'Fifteen', 'Sixteen']
    }
    $('.dropdown1').change(function() {
        if ( $(this).val() == '-1' ) {
            ""
        } else {
            $('.dropdown2').remove();

            $('div.dropdown23').append('<select id="dropdown2" class="dropdown2">')

           $.each(data[$(this).val()], function(i, val) {
               $('#dropdown2').append('<option value="'+ val.toLowerCase() +'">'+ val + '</option>')
          })
        }
    })
    $('div.dropdown23').on('change', '#dropdown2', function(){
        alert("Yes!!")
    })
})

有人请帮帮我。

这是Fiddle。

提前致谢!!

Answer 1

正在动态创建元素

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

即

$(document).on('event','selector',callback_function)

实施例

$('div.dropdown23').on('change', '#dropdown2', function(){
    //Your code         
});

DEMO

委派事件的优势在于，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在委派时保证存在的元素附加了事件处理程序，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还可以避免频繁附加和删除事件处理程序。

Answer 2

您需要在此处使用 event delegation ，因为您的select已动态添加到DOM中：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('body').on('change','#dropdown2',function() {
    alert("Yes!!")
});

基本上，事件委派将帮助您将更改事件附加到此新加载的select。

<强> Updated Fiddle

jquery - 不会在下拉列表中触发更改功能

2 个答案: