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

on() 文档

Answer 2

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

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