Question

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

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

所以我要做的是首先动态生成html，然后在触发click事件后在其上添加click事件，将更多动态生成的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重复时才会出现此问题，请确保没有dulipcate id用于父元素。

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

1 个答案: