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

问题描述

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

I create some dynamically generated html by jQuery and then add some click event on this generated html.

click事件可以正常工作，并且内部代码可以正确运行，并将一些花药动态生成的html添加到页面上的第一个动态生成的html中.

The click event work fine and the code inside run correctly and add some anther dynamically generated html to the first dynamically generated html on the page.

所以我要做的是先动态生成html，然后在触发click事件后在其上添加click事件，然后将更多动态生成的html添加到第一拳动态生成的html中.

So what I am trying to do is first dynamically generated html then add click event on it after the click event is triggered, add some more dynamically generated html to the fist dynamically generated html.

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

This all works fine but the second dynamically generated html not displaying on the screen, I inspect element on the target html and the html was generated but still not displayed on the screen.

这是我的代码:

$(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);
             }


         });
    }
});

//_________________________________________________________
});

推荐答案

仅当父元素ID重复时，才会出现此问题，请确保父元素不使用dulipcate id.

This problem occurs only when parent element id is duplicate, please ensure that no dulipcate id is used for parent element.

这篇关于动态生成的元素未显示在屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！