动态添加时，下拉列表（ul - 无序列表和 li - 列表项元素）不起作用

Question

当我将其添加为静态对象时，我的下拉列表工作正常。
但是当我从 JavaScript 动态添加它时，它就在那里但不起作用。

var LoginInfoDataSet;
$('#Modal4').modal('toggle');
MenuDataSet = response[0].MenuAllContent;
MenuHeaderDataSet = response[0].MenuHeaders;

var MenuAllContent = "";
var AllMenuContent = "";
var MenuHeaderTemplate = '<li class="my-main-menu"><a class="my-main-menu-1"><i style="font-size:18px; " class="fa fa-handshake"></i>' + MenuHeaderTitle + '<span class="arrow"></span></a> <div data-level="2"><ul >' + MenuHeaderContent + '</ul></div><hr class="Horizontal-Line1" /></li >';
var MenuHeaderTitle = "";
var MenuHeaderContent = "";
var LinkCode = "";
var LinkTitle = "";
var SubMenuTitle = "";
var SubMenuContent = "";
var DirectLinkTemplate = '<li> <a class="my-main-menu-1" onclick="GetAddPage(' + "'" + LinkCode + "'" + ')">  <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i>' + LinkTitle + '</a></li>';
var SubMenuTemplate = '<li class="submodule"> <a class="my-main-menu-1">  <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i> ' + SubMenuTitle + '<span class="arrow1"></span></a>  <div data-level="3"> <ul> ' + SubMenuContent + '</ul> </div > </li > ';
var SubLinkTemplate = ' <li class="submodule"> < a class="my-main-menu-1" onclick = "GetAddPage(' + "'" + LinkCode + "'" + ')" > <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i>' + LinkTitle + '</a > </li >'
var CompareTitle = "";
var i = 0;

do {
    CompareTitle = MenuHeaderDataSet[i].Col1

    var ii = 0;
    do {

        if (MenuDataSet[ii].Col1 == CompareTitle) {
            if (SubMenuTitle != "" && MenuDataSet[ii].Col4 != "3") {
                SubMenuTemplate = '<li class="submodule"> <a class="my-main-menu-1">  <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i> ' + SubMenuTitle + '<span class="arrow1"></span></a>  <div data-level="3"> <ul> ' + SubMenuContent + '</ul> </div > </li > ';

                // add the submenu to MenuContenet
                MenuHeaderContent += SubMenuTemplate;
                SubMenuTitle = "";
                SubMenuContent = "";
                alert(MenuHeaderContent)
            }

            switch (MenuDataSet[ii].Col4) {
                case "1":
                    LinkCode = MenuDataSet[ii].Col3;
                    LinkTitle = MenuDataSet[ii].Col2;
                    DirectLinkTemplate = '<li> <a class="my-main-menu-1" onclick="GetAddPage(' + "'" + LinkCode + "'" + ')">  <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i>' + LinkTitle + '</a></li>';

                    MenuHeaderContent += DirectLinkTemplate;

                    break;

                case "2":
                    SubMenuTitle = MenuDataSet[ii].Col2;
                    break;
                case "3":
                    LinkCode = MenuDataSet[ii].Col3;

                    LinkTitle = MenuDataSet[ii].Col2;

                    SubLinkTemplate = ' <li class="submodule"> < a class="my-main-menu-1" onclick = "GetAddPage(' + "'" + LinkCode + "'" + ')" > <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i>' + LinkTitle + '</a > </li >'

                    SubMenuContent += SubLinkTemplate;
                      alert(SubMenuContent)
                    break;

            }
        }

        ii++;
    }
    while (ii < MenuDataSet.length)

    if (SubMenuTitle != "") {
        SubMenuTemplate = '<li class="submodule"> <a class="my-main-menu-1">  <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i> ' + SubMenuTitle + '<span class="arrow1"></span></a>  <div data-level="3"> <ul> ' + SubMenuContent + '</ul> </div > </li > ';
        MenuHeaderContent += SubMenuTemplate;
        SubMenuTitle = "";
        SubMenuContent = "";

    }

    MenuHeaderTemplate = '<li class="my-main-menu"><a class="my-main-menu-1"><i style="font-size:18px" class="fa fa-handshake"></i>' + CompareTitle + '<span class="arrow"></span></a> <div data-level="2"><ul >' + MenuHeaderContent + '</ul></div><hr class="Horizontal-Line1" /></li >';

    AllMenuContent += MenuHeaderTemplate;
    i++;
}
while (i < MenuHeaderDataSet.length)
MenuAllContent = AllMenuContent;

document.getElementById("MainMenu").innerHTML = "";
try {
    // document.getElementById("MainMenu").innerHtml = MenuAllContent insertAdjacentElement  insertAdjacentHTML
    document.getElementById("MainMenu").insertAdjacentHTML("beforeend", MenuAllContent)

}
catch (ee) {
    alert(ee)
}

我尝试使用 innerHtml 和 insertAdjacentHTML 但它们都不适合我。
我检查了一些现有的文章和问题，但我不知道出了什么问题。

Answer 1

这是我想出的示例，请为您的菜单应如何表现添加逻辑，例如重定向到页面... 还可以根据您的需要更改菜单数据集和菜单标题数据集

document.addEventListener('DOMContentLoaded', function () {
    var MenuDataSet = [
    { Col1: 'Main', Col2: 'SubLink1', Col3: 'Code1', Col4: '3' },
    { Col1: 'Main', Col2: 'SubLink2', Col3: 'Code2', Col4: '3' },
    { Col1: 'Services', Col2: 'Inquiry', Col3: 'ServiceCode1', Col4: '1' },
    { Col1: 'Contact', Col2: 'Email Us', Col3: 'ContactCode1', Col4: '1' }
];

    var MenuHeaderDataSet = [
    { Col1: 'Main' },
    { Col1: 'Services' },
    { Col1: 'Contact' }
];
    var MenuAllContent = "";
    var AllMenuContent = "";
    
    for (var i = 0; i < MenuHeaderDataSet.length; i++) {
        var MenuHeaderContent = "";
        var CompareTitle = MenuHeaderDataSet[i].Col1;
        
        for (var ii = 0; ii < MenuDataSet.length; ii++) {
            if (MenuDataSet[ii].Col1 === CompareTitle) {
                switch (MenuDataSet[ii].Col4) {
                    case "1":
                        MenuHeaderContent += '<li><a class="my-main-menu-1" data-linkcode="' + MenuDataSet[ii].Col3 + '">' + MenuDataSet[ii].Col2 + '</a></li>';
                        break;
                    case "2":
                        
                        break;
                    case "3":
                        MenuHeaderContent += '<li class="submodule"><a class="my-main-menu-1" data-linkcode="' + MenuDataSet[ii].Col3 + '">' + MenuDataSet[ii].Col2 + '</a></li>';
                        break;
                }
            }
        }
        
        var MenuHeaderTemplate = '<li class="my-main-menu"><a class="my-main-menu-1">' + CompareTitle + '<span class="arrow"></span></a><div data-level="2"><ul>' + MenuHeaderContent + '</ul></div><hr class="Horizontal-Line1" /></li>';
        AllMenuContent += MenuHeaderTemplate;
    }
    
    MenuAllContent = AllMenuContent;
    document.getElementById("MainMenu").insertAdjacentHTML("beforeend", MenuAllContent);

    
    document.getElementById('MainMenu').addEventListener('click', function (e) {
        if (e.target && e.target.nodeName == "A" && e.target.classList.contains('my-main-menu-1')) {
            var linkCode = e.target.dataset.linkcode;
            if (linkCode) {
                GetAddPage(linkCode);
                
            }
        }
    });
});

// Mock function for GetAddPage
function GetAddPage(linkCode) {
    alert('Link code: ' + linkCode);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Menu Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <ul id="MainMenu"></ul>
</body>
</html>