jQuery .change只适用于初审

Question

我有一系列条件选择元素，它们使用.load从外部文件中插入动态内容。问题是，它只为第一个元素触发，任何后续的实例都不会导致任何操作。

我一开始是这样的：

jQuery(document).ready(function($) {


$('#autocad-level-1').change(function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').change(function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

研究表明，我应该使用.on作为事件处理程序，但我在这方面也没有成功。

jQuery(document).ready(function($) {

$('#autocad-level-1').on("change", "select", function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').on("change", "select", function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

这是我的HTML：

<div id="autocad-level-1-container">
    <select id="autocad-level-1" name="autocad-level-1">
      <option value="0">Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      ...
    </select>
</div>
<div id="autocad-level-2-container"></div>
<div id="autocad-level-3-container"></div>

我在这里做错什么了？我没有主意了。

Answer 1

您需要侦听父元素的select，而不是select本身。

$('#autocad-level-2-container').on("change", "#autocad-level-2", function() { 
    /*** code here ***/
});

Answer 2

尝试委托这些事件，如果您的.load更改了页面的html并替换了原始的选择框，那么绑定到它们的事件将被解除绑定。

如果你想做这样的事情：

$(document).on("change", "#autocad-level-2", function() { .... 

对于绑定在选择框上的所有更改事件也是如此。

Answer 3

使用change，如下所示。

 $('#autocad-level-1').on('change',function() {

        var cat_id = $(this).val();
        console.log('Category Selected');
        $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

    });