Question

我有一个类别列表，当客户从列表中选择一个时，会在其下面创建一个包含该类别子项的新列表，现在我需要添加另一个级别（另一个列表）但我不知道如何。这应该可以，但我想脚本不知道元素是否存在。

到目前为止，我的JS看起来像这样：

<script>
// when the user clicks on a drop down item from the list it adds a new drop down list
$('#cat_select_1').on('change', function() {

    // fetch second list from the other script
    var fetchUrl = 'http://localhost/includes/ajax/list-of-cats.php?catid=';
    var fetchCatId = $( "#cat_select_1" ).val();

    // if the second list is there
    if ($("#cat_select_2").length){

        // replace it with the new one
        $.get(fetchUrl.concat(fetchCatId)).done(function(data) { $("#cat_select_2").html(data); });
    }
    else {
        // otherwise append this one
        $.get(fetchUrl.concat(fetchCatId)).done(function(data) { $("#jumbocats").append(data); });

    }

});

//list #2 (not working)
$('#cat_select_2').on('change', function() {

    // fetch third list from the other script
    var fetchUrl = 'http://localhost/includes/ajax/list-of-cats.php?catid=';
    var fetchCatId = $( "#cat_select_2" ).val();

    // if the third list is there
    if ($("#cat_select_3").length){

        // replace it with the new one
        $.get(fetchUrl.concat(fetchCatId)).done(function(data) { $("#cat_select_3").html(data); });
    }
    else {
        // otherwise append this one
        $.get(fetchUrl.concat(fetchCatId)).done(function(data) { $("#jumbocats").append(data); });
        }
});

</script>

它适用于第一个列表，但它不适用于第二个列表。

我错过了什么？

Answer 1

您不能将直接事件与不存在的元素一起使用。您需要使用委托事件来解决此问题

 $(document).on('change', '#cat_select_2' function() { ... }

当文档可以被当时存在的任何父元素替换。

查看on文档了解更多详情（第34节;直接和委派活动＆＃34;

将ajax请求添加到附加了先前ajax请求的元素

1 个答案: