动态生成的元素不在屏幕上显示

Question

我通过jQuery创建了一些动态生成的html，然后在这个生成的html上添加了一些点击事件。

点击事件工作正常，里面的代码正常运行，并在页面上的第一个动态生成的html中添加了一些动态生成的html。

所以我要做的是先动态生成html，然后在点击事件触发后在其上添加点击事件，在第一个动态生成的html中添加一些更动态生成的html。

这一切都很好，但是第二个动态生成的 html 没有显示在屏幕上，我检查目标 html 上的元素并且 html 已生成但仍未显示在屏幕上。

这是我的代码：

$(function () {

console.log("Category Page Script loaded");

$.post('/Category/GetCategories', {}).success(function (data) {
    console.log(data);

    $Category = $('ul#Category-filter');
    $Category.empty();
    console.log("coustom empty");
    var html = '';

    for (sub in data) {
        console.log(data[sub].CategoryID, data[sub].CategoryName);
        var html = '<li class="dropdown-tree CategorySelected" data-id="' + data[sub].CategoryID + '">'
                   + '<a class="dropdown-tree-a">' + data[sub].CategoryName + ' COLLECTION </a>'
                   + '<ul class="category-level-2 dropdown-menu-tree" id="category">'
                   + '</ul>'
                   + '</li>'
        console.log(html);
        $Category.append(html);
    }

}).error(function () {
    console.log('error');
});
//___________________________________________________________________________

$(document).on('click', 'li.CategorySelected', function () {

    console.log("clickd");

    // Get the id from the link
    var SelectedCategoryID = $(this).attr("data-id");
    console.log(SelectedCategoryID);


    if (SelectedCategoryID != '') {

        console.log('1');

        $CategorySelected = $('#category');
        console.log($CategorySelected);
        console.log('2');
        $CategorySelected.empty();
        console.log('3');
        console.log("CategorySelected empty");
        console.log('4');
        var html = '';
        console.log('5');
        $.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
         function (data) {
             console.log(data);
             console.log('6');
             for (sub in data) {
                 console.log(data[sub].SubCategoryID, data[sub].SubCategoryName);

                 var html = '<li><a href="' + data[sub].SubCategoryID + '">' + data[sub].SubCategoryName + ' </a> </li>'

                 console.log(html);

                 $CategorySelected.append(html);
                 console.log($CategorySelected);
             }


         });
    }
});

//_________________________________________________________
});

Answer 1

只有当父元素id重复时才会出现此问题，请确保父元素没有重复id。