Create dynamic submenu + event triggering with append?

Question

so I was trying to implement a submenu within a submenu on a navigation bar. The idea is to have the submenu "reports management" generates when the Report is clicked. The code as below.

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);
      });

But I don't understand is it the limitation or the way I using is wrong because it wouldn't generate when the Reports inside the Files is clicked.

Always Helping · Accepted Answer · 2020-06-30T02:27:39.387

You need to attach an event listener to you dynamically appended element.

For second click #btnReports you need to bind this click to the document event listener instead a .click function because #btnReports does not exist when we load the page. It append after we click on #btnFileMgmt

Also, Its ideal to use .html instead of an .append - .html will replace the previous elements and will not copy them. .append will create elements multiple time on every click you do.

Read more about how .append works here and about .html here

Working Demo: https://jsfiddle.net/usmanmunir/w781s4ca/

Run snippet below to see it working

$(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>

Thanks for the reply. It works. If possible, can you explain a little bit more because I'm new with jquery. Whats the difference between the html and append? also click and on? Many thanks — NewbieHere, Jun 30 '20 at 02:24
Glad i was able to help you. Do not forget to up-vote my answer as if it helped you. Let me edit my answer. I will add some link to where you read about the `.append` and `.html` — Always Helping, Jun 30 '20 at 02:25

Create dynamic submenu + event triggering with append?

1 Answers1