JQuery 使用 JQuery 加载内容时选择器不起作用

Question

我有一个非常复杂的案例。我制作了一个 jquery 函数来构建一个菜单，使用 bootstrap 框架和 mysql 数据库来存储元素。结果看起来不错，即使我 copy/paste 直接在测试页面中显示并且工作正常，但肯定这不是目标，因为我希望它是动态的。问题是当我让 jquery 构建代码时，我无法使用选择器激活下拉功能，例如这里是 jquery 构建 HTML 代码：

$.ajax({
    url: 'GetMenu',
    success: function (data) {


        var charWrap ="";
        var charMenu ="";

        data = JSON.parse(data);
        var category = ['femme','homme'];

        $.each(category, function (e) {

              charWrap += "<ul><li class=\"" + category[e] + "\"><a href=\"#demo" + e + "\" class=\"" + category[e] + "\" data-toggle=\"collapse\" data-parent=\"#MainMenu\"><strong>" + category[e].toUpperCase() + "<\/strong><\/a><\/li><\/ul>";
              charWrap += "<div class=\"collapse\" id=\"demo" + e + "\">";


              charMenu += "<li class=\"dropdown\">";
              charMenu += "<a href=\"#\" class=\"dropdown-toggle\"  role=\"button\" aria-haspopup=\"true\"><strong>" + category[e].toUpperCase()  + "<\/strong><\/a>";
              charMenu += "<div class=\"row dropdown-menu dropdown-menu-left MenuCategoryLGSS\" >";
              charMenu += "<div class=\"col-md-4\">";
              charMenu += "<ul class=\"img-menu\">";

                        if (category[e] === 'femme'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/femme.png\" ><\/li>";
                        } 
                        if (category[e] === 'homme'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/homme.png\" ><\/li>";
                        }
                        if (category[e] === 'enfant'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/enfant.png\" ><\/li>";
                        }
                        if (category[e] === 'ameublement'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/ameublement.png\" ><\/li>";
                        }
                        if (category[e] === 'deco'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/deco.png\" ><\/li>";
                        }
                        if (category[e] === 'divers'){
                         charMenu += "<li><img src=\"\/ArtShoppingJWeb\/img\/divers.png\" ><\/li>";
                        }        

              charMenu += "<\/ul>";
              charMenu += "<\/div>";  
              charMenu += "<div class=\"col-md-8\">";  

            dataElt = JSON.parse(JSON.stringify(data[category[e]]));


            $.each(dataElt, function (index) {


                elt = JSON.parse(JSON.stringify(dataElt[index]));


                $.each(elt, function (index) {

                    console.log("index : " + index);


                    charWrap += "<ul><li><a href=\"#" + category[e] + "-" + index + "\" class=\"\" data-toggle=\"collapse\" data-parent=\"#" + category[e] + "-" + index +  "\">" + index + "<i class=\"fa fa-caret-down\"><\/i><\/a><\/li><\/ul>";
                    charWrap += "<div class=\"collapse identSubmenu2 list-group-submenu\" id=\""  + category[e] + "-" + index + "\">";


                    charMenu += "<ul><li><a href=\"#" + category[e] + "-" + index + "-menu\" data-toggle=\"collapse\" data-parent=\"#" + category[e] + "-menu\" >" + index + "<\/a><\/li><\/ul>";
                    charMenu += "<div class=\"identSubmenu4 collapse list-group-submenu\" id=\"" + category[e] + "-" + index + "-menu\" >";

                    var arValues = elt[index];

                    $.each(arValues, function (element) {


                        charWrap += "<a href=\"#\" class=\"list-group-item\" data-parent=\"#" + category[e] + "-" + index + "\">" + arValues[element] + "<\/a>";

                        charMenu += "<a href=\"#\" class=\"list-group-item\" data-parent=\"#" + category[e] + "-" + index + "-menu\" >" + arValues[element] + "<\/a>";

                    })

                  charWrap += "<\/div>";    

                  charMenu += "<\/div>";    



                })

            })

            charWrap += "<\/div>";

            charMenu += "<\/div>"; 
            charMenu += "<\/div>"; 
            charMenu += "<\/li>"; 
        })



        $(".MenuCategory").append(charWrap);
        $("#MenuCategoryLG").append(charMenu);
    }

这里是完成的结果：

<div class="nav navbar-nav visible-lg">
   <ul class="nav navbar-nav navbar-right" id="MenuCategoryLG">
      <li class="dropdown">
         <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>FEMME</strong></a>
         <div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
            <div class="col-md-4">
               <ul class="img-menu">
                  <li><img src="/ArtShoppingJWeb/img/femme.png"></li>
               </ul>
            </div>
            <div class="col-md-8">
               <ul>
                  <li><a href="#femme-Bijoux-menu" data-toggle="collapse" data-parent="#femme-menu">Bijoux</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">pendentif</a></div>
               <ul>
                  <li><a href="#femme-Coiffure-menu" data-toggle="collapse" data-parent="#femme-menu">Coiffure</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">chapeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">coiffe</a></div>
               <ul>
                  <li><a href="#femme-Sac-menu" data-toggle="collapse" data-parent="#femme-menu">Sac</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Sac-menu"><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">pochette</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac de voyage</a></div>
               <ul>
                  <li><a href="#femme-Vetements-menu" data-toggle="collapse" data-parent="#femme-menu">Vetements</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">jupe</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">pantalon</a></div>
            </div>
         </div>
      </li>
      <li class="dropdown">
         <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>HOMME</strong></a>
         <div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
            <div class="col-md-4">
               <ul class="img-menu">
                  <li><img src="/ArtShoppingJWeb/img/homme.png"></li>
               </ul>
            </div>
            <div class="col-md-8">
               <ul>
                  <li><a href="#homme-Bijoux-menu" data-toggle="collapse" data-parent="#homme-menu">Bijoux</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">pendentif</a></div>
               <ul>
                  <li><a href="#homme-Coiffure-menu" data-toggle="collapse" data-parent="#homme-menu">Coiffure</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">chapeau</a></div>
               <ul>
                  <li><a href="#homme-Sac-menu" data-toggle="collapse" data-parent="#homme-menu">Sac</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Sac-menu"><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac de voyage</a></div>
               <ul>
                  <li><a href="#homme-Vetements-menu" data-toggle="collapse" data-parent="#homme-menu">Vetements</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">pantalon</a></div>
            </div>
         </div>
      </li>
      <li class="dropdown">
         <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>FEMME</strong></a>
         <div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
            <div class="col-md-4">
               <ul class="img-menu">
                  <li><img src="/ArtShoppingJWeb/img/femme.png"></li>
               </ul>
            </div>
            <div class="col-md-8">
               <ul>
                  <li><a href="#femme-Bijoux-menu" data-toggle="collapse" data-parent="#femme-menu">Bijoux</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#femme-Bijoux-menu">pendentif</a></div>
               <ul>
                  <li><a href="#femme-Coiffure-menu" data-toggle="collapse" data-parent="#femme-menu">Coiffure</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">chapeau</a><a href="#" class="list-group-item" data-parent="#femme-Coiffure-menu">coiffe</a></div>
               <ul>
                  <li><a href="#femme-Sac-menu" data-toggle="collapse" data-parent="#femme-menu">Sac</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Sac-menu"><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">pochette</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#femme-Sac-menu">sac de voyage</a></div>
               <ul>
                  <li><a href="#femme-Vetements-menu" data-toggle="collapse" data-parent="#femme-menu">Vetements</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="femme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">jupe</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#femme-Vetements-menu">pantalon</a></div>
            </div>
         </div>
      </li>
      <li class="dropdown">
         <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true"><strong>HOMME</strong></a>
         <div class="row dropdown-menu dropdown-menu-left MenuCategoryLGSS">
            <div class="col-md-4">
               <ul class="img-menu">
                  <li><img src="/ArtShoppingJWeb/img/homme.png"></li>
               </ul>
            </div>
            <div class="col-md-8">
               <ul>
                  <li><a href="#homme-Bijoux-menu" data-toggle="collapse" data-parent="#homme-menu">Bijoux</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Bijoux-menu"><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bague</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">boucle d'oreilles</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">bracelet</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">collier</a><a href="#" class="list-group-item" data-parent="#homme-Bijoux-menu">pendentif</a></div>
               <ul>
                  <li><a href="#homme-Coiffure-menu" data-toggle="collapse" data-parent="#homme-menu">Coiffure</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Coiffure-menu"><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">bandeau</a><a href="#" class="list-group-item" data-parent="#homme-Coiffure-menu">chapeau</a></div>
               <ul>
                  <li><a href="#homme-Sac-menu" data-toggle="collapse" data-parent="#homme-menu">Sac</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Sac-menu"><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac a main - saccoche</a><a href="#" class="list-group-item" data-parent="#homme-Sac-menu">sac de voyage</a></div>
               <ul>
                  <li><a href="#homme-Vetements-menu" data-toggle="collapse" data-parent="#homme-menu">Vetements</a></li>
               </ul>
               <div class="identSubmenu4 collapse list-group-submenu" id="homme-Vetements-menu"><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">ceinture</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">chaussure</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">costume</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">maillots de bain</a><a href="#" class="list-group-item" data-parent="#homme-Vetements-menu">pantalon</a></div>
            </div>
         </div>
      </li>
   </ul>
</div>

第一个

运行良好预计最后两个无法打开它们这是我编写的 JQuery 代码，用于打开和关闭下拉部分

$("li.dropdown > a").on('mouseover click', function () {

     console.log("tototot");

    $('li.dropdown').each(function(){

       console.log("tututututu");

      $(this).removeClass('open'); 
    });

    $(this).parent().addClass('open');
});



$('body').on('mouseover', function (e) {
    console.log("tata");

    if (!$('li.dropdown').is(e.target)
            && $('li.dropdown').has(e.target).length === 0
            && $('.open').has(e.target).length === 0
            ) 
            {
        $('li.dropdown').removeClass('open');
    }

});

如果有人已经遇到这个问题，请告诉我他是如何解决的，在此先感谢您的帮助

Br,

杰瑞米

Answer 1

$(document).on('mouseover click',"li.dropdown > a", function () {
    $('li.dropdown').each(function(){
        $(this).removeClass('open'); 
    });
    $(this).parent().addClass('open');
});

A helpful link.

JQuery 使用 JQuery 加载内容时选择器不起作用

JQuery selector not working when content is loaded with JQuery

html

jquery

jquery-selectors