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

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

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

Answer 2

如果您使用的是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()

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

2 个答案: