如果添加了JQuery，选择不触发的更改

Question

我有一个多级别选择链，其中第一个选择的值生成下一个选择列表的选项。在第二个列表中，某些值会导致div显示另一个输入。

我的代码（如下）在静态内容上测试时（如：第二个选择硬编码在html中）似乎工作得很好。但是当我用JQuery添加它时，第二个层次不再触发.change函数。

<script type="text/javascript"> 
$(document).ready(function() { 
    $dts = $("select[name='tourdes']"); 
    $dts.change(function() { 
    var dtsValue = $(this).val(); 
    var dtsString = '?tourdes=' + dtsValue; 
    $('#dateSelect').show(); 
    $('#dateSelect').load('include/avdates.php' + dtsString).append(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $tags = $("select[name='tourcode']"); 
    $tags.change(function() { 
    if ($(this).val() == "private") { 
    $(".prvcal").css({"visibility":"visible"}); 
    } 
    }); 
}); 
</script> 

我猜的东西需要重新初始化，但我正在用我的实验没有在那里。

Answer 1

如果你正在使用jQuery 1.7，你会想用on，既live和delegate已被弃用。

$(document).on("change", "select[name='tourcode']", function() { 
    var dtsValue = $(this).val(); 
    var dtsString = '?tourdes=' + dtsValue; 
    $('#dateSelect').show(); 
    $('#dateSelect').load('include/avdates.php' + dtsString).append(); 
}); 

docs for on()

Answer 2

您可能正在使用动态生成的HTML元素。如果是这样的话，你需要使用.delegate()处理它们：

$('select').delegate("[name='tourdes']", 'change', function() {