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

在項目生成之前將事件偵聽器添加到生成的元素時（有時會發生），它不會在單擊時觸發事件。

最好的解決方案是將click事件附加到正文（或在頁面加載時呈現的項目容器）中，並且僅當click在所需元素內時才監聽click。

它是這樣的：

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