如果由 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() {