Javascript 菜单下拉菜单在点击时不触发功能

Question

所以我一直在四处寻找和搜索，当我没有通过我的 JS 生成代码并将输出作为 html 放在文件上时，它会触发。菜单应该是动态的并在其上生成 subs 并且 subs 有产品等等我正在这样做并且逻辑上是正确的但是不知道 JS 是否与这段代码的某些部分冲突。

JS 生成菜单:

$(function(){
var ul = $('#category-content');
var subcategoryLi = $('#sublist');
var productsLi = $('#productList');


init();

function init(){
    GetCategorys();
}

function BuildSubCategorys(id,sub){
    var content = '';
    if (typeof(sub) != 'undefined' && sub.length > 0){
        for(var i = 0; i < sub.length; i++){
            if (sub[i].c_parentcat == id){
                content += AddSubItem(sub[i].c_name,sub[i].c_id);
            }
        }
        return content;
    }
    else{
        return '';
    }
}

function hasSubs(j,d){
    for(var i=0;i<d.length;i++){
        if(d[i].c_parentcat == j ){
            return true;
        }
    }
}

function BuildCategorys(root){
    var content = AddCategoryHeader('Categorias');
    var subs = [];
    if (typeof(root) != 'undefined' && root.length > 0){
        for(var i = 0; i < root.length; i++){
            if (root[i].c_parentcat == -1){
                content += AddCategory(root[i].c_name,root[i].c_id);
                if (hasSubs(root[i].c_id, root) == true){
                    var subContent = BuildSubCategorys(root[i].c_id, root);
                    subs[root[i].c_id] = CreateSubList(subContent);
                }
            }
        }
        ul.append(content);
        ul.append(AddSeparator());
        for(var j = 0; j < root.length; j++){
            curr_id = root[j].c_id;
            ul.find('#category'+curr_id).append(subs[curr_id]);

        }
    }
    else {
        ul.append(AddCategoryHeader('Categorias'));
        ul.append(HandleNoSubData());
        ul.append(AddSeparator());
    }

    //Build the products
    GetCategoryProducts();
}


function BuildProducts(p){

        var content = AddCategoryHeader('Produtos sem categoria');
        var category_items = [];
        if (typeof(p) != 'undefined' && p.length > 0){
            for(var i=0; i < p.length; i++){
                if (p[i].p_categoryid == -1){
                    //he has no category so lets add it to the non category section
                    content += AddProduct(p[i].p_name,p[i].p_id);
                }
                else {
                    subcategoryLi.find('#subcategory'+ p[i].p_categoryid).append(AddProduct(p[i].p_name,p[i].p_id));
                }
            }

            ul.append(content);
            //LEFT: LINK ON THE PRODUCT WITH THEIR ID ON CREATE FUNCTION

        }else{
            ul.append(AddCategoryHeader('Produtos sem categoria'))
            ul.append(HandleNoProdData());
        }
}


    function AddSeparator(){
            return '<li role="separator" class="divider"></li>';
    }

    function AddCategoryHeader(name){
        return '<li class="dropdown-header">' + name +'</li>';
    }

    function AddCategory(name,id){
            return '<li class="dropdown-submenu" id="category'+id+'"><a id="menu-itex" tabindex="-1" href="javascript:;">' + name + ' <span class="caret"></span></a></li>';
    }

    function AddProduct(name,id){
        return '<li><a href="javascript:;" id="product'+ id +'">' + name + '</a></li>';
    }

    function AddSubItem(name,id){
            return '<li><a href="javascript:;" id="subcategory'+id+'"> '+ name + ' </a></li>';
    }

    function CreateSubList(c){
            return '<ul id="sublist" class="dropdown-menu">'+ c +'</ul>';
    }

    function CreateProductsList(){
        return '<li class="dropdown"><ul id="productList" class="dropdown-menu">'+ c +'</ul></li>';
    }

    function HandleNoData(){
        return '<li><a href="javascript:;"> Não existem categorias </a></li>';
    }
    function HandleNoSubData(){
        return '<li><a href="javascript:;"> Não existem sub-categorias </a></li>';
    }

    function HandleNoProdData(){
            return '<li><a href="javascript:;"> Não existem produtos </a></li>';
    }

    function GetCategorys(){
            var url = base_url + 'home/ajaxCategorys';
            $.post(url,function(js){
                if (js != null && js != 'false')
                    BuildCategorys(JSON.parse(js));
                else
                    return false;
            });
    }

    function GetCategoryProducts(){
        var url = base_url + 'home/ajaxCategoryProducts';
        $.post(url,function(js){
            if (js != null && js != 'false')
                BuildProducts(JSON.parse(js));
            else
                return false;
        });
    }

    $(document).ready(function(){
        $('#menu-itex').on("click" ,function(e){
            console.log('Click for menu');
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();

        });
    });
});

我的代码直接输出为 html 它可以工作，但如果我以这种方式使用 JS 脚本生成它，它不会在 menu-itex id click 上触发，我也尝试使用该类。从 w3wschools boostrap 高级菜单中获得了触发想法。

Answer 1

当您在生成元素之前向生成的元素添加事件监听器时(有时会发生)，它不会在点击时触发事件。

最好的解决方案是将点击事件附加到正文(或在页面加载时呈现的元素容器)，并且仅当它位于所需元素内时才监听点击。

它是这样的:

//$('body').on('click', <-- would work too, but it's not delimited to a certain section of your page.
$('#category-content').on('click', '#menu-itex', function(){
     //Your stuff here
})