分享
三行代码  ›  专栏  ›  技术社区  ›  NewbieHere

通过追加动态创建子菜单+事件触发?[复制]

  •  1
  • NewbieHere  · 技术社区  · 6 天前

    所以我试图在导航栏的子菜单中实现一个子菜单。我们的想法是有一个子菜单“ “当 报告

    HTML格式

             <li class="drop-down"><a href="#" id="btnFileMgmt">File &nbsp; <i class="icofont-document-folder"></i></a>
              <ul id="filesMgmt">
                  
              </ul>
            </li>
    

    JQuery公司

     $(document).ready(function(){
    
    
          var files_management = '<li><a href="#" id="btnViewFiles">View Files</a></li>' + 
                                 '<li class="drop-down"><a href="#" id="btnReports"> Reports </a>' + 
                                    '<ul id="reportsMgmt">' + 
                                    '</ul>' +
                                 '</li>';
    
          var reports_management = '<li><a href="#" id="fileList">Files</a></li>' + 
                                   '<li><a href="#" id="borrowList">Borrowed Files</a></li>';
    
    
          $("#btnFileMgmt").click(function(){
              $("#filesMgmt").append(files_management);
          });
    
          $("#btnReports").click(function(){
              $("#reportsMgmt").append(reports_management);
          });
    
    

    但是我不明白是因为我的限制或者我使用的方式是错误的,因为它不会在 文件夹 单击。

    1 回复  |  直到 5 天前
        1
  •  0
  •   AlwaysHelping Santa    5 天前

    您需要在动态附加的元素上附加一个事件侦听器。

    #btnReports 您需要将此单击绑定到文档事件侦听器,而不是 .click #BTN报告 没有 加载页面时存在。它会在我们点击后追加 #btnFileMgmt

    .html 而不是 .append - .html格式 将替换以前的元素,而不会复制它们。 。追加 倍数 每一次点击时间。

    。追加 作品 here 关于 here

    工作演示: https://jsfiddle.net/usmanmunir/w781s4ca/

    运行下面的代码片段以查看它的工作情况

    $(document).ready(function() {
    
      var files_management = '<li><a href="#" id="btnViewFiles">View Files</a></li>' +
        '<li class="drop-down"><a href="#" id="btnReports"> Reports </a>' +
        '<ul id="reportsMgmt">' +
        '</ul>' +
        '</li>';
    
      var reports_management = '<li><a href="#" id="fileList">Files</a></li>' +
        '<li><a href="#" id="borrowList">Borrowed Files</a></li>';
    
      $("#btnFileMgmt").click(function() {
        $('#filesMgmt').html(files_management);
      });
    
      $(document).on("click", "#btnReports", function() {
        $('#reportsMgmt').html(reports_management);
      });
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <li class="drop-down"><a href="#" id="btnFileMgmt">File &nbsp; <i class="icofont-document-folder"></i></a>
    
      <ul id="filesMgmt">
    
      </ul>
    </li>