如果添加了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() {