Appending DOM Loses Menu Drop Down Functionality

Question

I am appending dynamic DOM elements (after Ajax calls to gather the data) as seen below. I have narrowed the code down to what I believe is most important:

<!-- SideMenu HTML -->
<div id="sidebar-menu">
    <ul id="folders">
        <!-- AJAX DATA POPULATES MENU HERE -->

<!-- HTML File calling JS function -->
<script>
    $(document).ready(function() {
        getParentFolders('parentFolderTitle');
    });
</script>



// JS File function...
var parentFolders;  // Values retrieved from AJAX calls

function buildFolderMenu(index) {

    var markup = '<li class="has_sub">' +
                     '<a ... > parentFolders[index].Name + '</a>' +
                     '<ul ...>' +
                         '<li> SUB FOLDER TEST <li>' +
                     '</ul>' +
                 '</li>';

    $(#folders').append(markup);
}

EDIT: My code is interacting with a 3rd party template, after reading the replies, I was able to track down the file which handles the 'click events'. However, based on my own code shown above, I am not sure how to adjust the template code to work with my dynamically appended DOM.

Here is the template code handling the click: (I can see the 'menuItemClick' function is where this is likely handled, but how do I apply the '.on('', function())' adjustments here, based on how this file is written?)

/**
    * Theme: Adminto Admin Template
    * Author: Coderthemes
    * Module/App: Main Js
    */


    !function($) {
        "use strict";

        var Sidemenu = function() {
            this.$body = $("body"),
            this.$openLeftBtn = $(".open-left"),
            this.$menuItem = $("#sidebar-menu a")
        };
        Sidemenu.prototype.openLeftBar = function() {
          $("#wrapper").toggleClass("enlarged");
          $("#wrapper").addClass("forced");

          if($("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left")) {
            $("body").removeClass("fixed-left").addClass("fixed-left-void");
          } else if(!$("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left-void")) {
            $("body").removeClass("fixed-left-void").addClass("fixed-left");
          }

          if($("#wrapper").hasClass("enlarged")) {
            $(".left ul").removeAttr("style");
          } else {
            $(".subdrop").siblings("ul:first").show();
          }

          toggle_slimscroll(".slimscrollleft");
          $("body").trigger("resize");
        },
        //menu item click
        Sidemenu.prototype.menuItemClick = function(e) {
           if(!$("#wrapper").hasClass("enlarged")){
            if($(this).parent().hasClass("has_sub")) {

            }
            if(!$(this).hasClass("subdrop")) {
              // hide any open menus and remove all other classes
              $("ul",$(this).parents("ul:first")).slideUp(350);
              $("a",$(this).parents("ul:first")).removeClass("subdrop");
              $("#sidebar-menu .pull-right i").removeClass("md-remove").addClass("md-add");

              // open our new menu and add the open class
              $(this).next("ul").slideDown(350);
              $(this).addClass("subdrop");
              $(".pull-right i",$(this).parents(".has_sub:last")).removeClass("md-add").addClass("md-remove");
              $(".pull-right i",$(this).siblings("ul")).removeClass("md-remove").addClass("md-add");
            }else if($(this).hasClass("subdrop")) {
              $(this).removeClass("subdrop");
              $(this).next("ul").slideUp(350);
              $(".pull-right i",$(this).parent()).removeClass("md-remove").addClass("md-add");
            }
          }
        },

        //init sidemenu
        Sidemenu.prototype.init = function() {
          var $this  = this;

          var ua = navigator.userAgent,
            event = (ua.match(/iP/i)) ? "touchstart" : "click";

          //bind on click
          this.$openLeftBtn.on(event, function(e) {
            e.stopPropagation();
            $this.openLeftBar();
          });

          // LEFT SIDE MAIN NAVIGATION
          $this.$menuItem.on(event, $this.menuItemClick);

          // NAVIGATION HIGHLIGHT & OPEN PARENT
          $("#sidebar-menu ul li.has_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");
        },

        //init Sidemenu
        $.Sidemenu = new Sidemenu, $.Sidemenu.Constructor = Sidemenu

    }(window.jQuery),


    function($) {
        "use strict";

        var FullScreen = function() {
            this.$body = $("body"),
            this.$fullscreenBtn = $("#btn-fullscreen")
        };

        //turn on full screen
        // Thanks to http://davidwalsh.name/fullscreen
        FullScreen.prototype.launchFullscreen  = function(element) {
          if(element.requestFullscreen) {
            element.requestFullscreen();
          } else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if(element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
          } else if(element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
        },
        FullScreen.prototype.exitFullscreen = function() {
          if(document.exitFullscreen) {
            document.exitFullscreen();
          } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          }
        },
        //toggle screen
        FullScreen.prototype.toggle_fullscreen  = function() {
          var $this = this;
          var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
          if(fullscreenEnabled) {
            if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
              $this.launchFullscreen(document.documentElement);
            } else{
              $this.exitFullscreen();
            }
          }
        },
        //init sidemenu
        FullScreen.prototype.init = function() {
          var $this  = this;
          //bind
          $this.$fullscreenBtn.on('click', function() {
            $this.toggle_fullscreen();
          });
        },
         //init FullScreen
        $.FullScreen = new FullScreen, $.FullScreen.Constructor = FullScreen

    }(window.jQuery),



    //main app module
     function($) {
        "use strict";

        var App = function() {
            this.VERSION = "1.5.0",
            this.AUTHOR = "Coderthemes",
            this.SUPPORT = "coderthemes@gmail.com",
            this.pageScrollElement = "html, body",
            this.$body = $("body")
        };

         //on doc load
        App.prototype.onDocReady = function(e) {
          FastClick.attach(document.body);
          resizefunc.push("initscrolls");
          resizefunc.push("changeptype");

          $('.animate-number').each(function(){
            $(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-duration")));
          });

          //RUN RESIZE ITEMS
          $(window).resize(debounce(resizeitems,100));
          $("body").trigger("resize");

          // right side-bar toggle
          $('.right-bar-toggle').on('click', function(e){

              $('#wrapper').toggleClass('right-bar-enabled');
          });


        },
        //initilizing
        App.prototype.init = function() {
            var $this = this;
            //document load initialization
            $(document).ready($this.onDocReady);
            //init side bar - left
            $.Sidemenu.init();
            //init fullscreen
            $.FullScreen.init();
        },

        $.App = new App, $.App.Constructor = App

    }(window.jQuery),

    //initializing main application module
    function($) {
        "use strict";
        $.App.init();
    }(window.jQuery);



    /* ------------ some utility functions ----------------------- */
    //this full screen
    var toggle_fullscreen = function () {

    }

    function executeFunctionByName(functionName, context /*, args */) {
      var args = [].slice.call(arguments).splice(2);
      var namespaces = functionName.split(".");
      var func = namespaces.pop();
      for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
      }
      return context[func].apply(this, args);
    }
    var w,h,dw,dh;
    var changeptype = function(){
        w = $(window).width();
        h = $(window).height();
        dw = $(document).width();
        dh = $(document).height();

        if(jQuery.browser.mobile === true){
            $("body").addClass("mobile").removeClass("fixed-left");
        }

        if(!$("#wrapper").hasClass("forced")){
          if(w > 990){
            $("body").removeClass("smallscreen").addClass("widescreen");
              $("#wrapper").removeClass("enlarged");
          }else{
            $("body").removeClass("widescreen").addClass("smallscreen");
            $("#wrapper").addClass("enlarged");
            $(".left ul").removeAttr("style");
          }
          if($("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left")){
            $("body").removeClass("fixed-left").addClass("fixed-left-void");
          }else if(!$("#wrapper").hasClass("enlarged") && $("body").hasClass("fixed-left-void")){
            $("body").removeClass("fixed-left-void").addClass("fixed-left");
          }

      }
      toggle_slimscroll(".slimscrollleft");
    }


    var debounce = function(func, wait, immediate) {
      var timeout, result;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) result = func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) result = func.apply(context, args);
        return result;
      };
    }

    function resizeitems(){
      if($.isArray(resizefunc)){
        for (i = 0; i < resizefunc.length; i++) {
            window[resizefunc[i]]();
        }
      }
    }

    function initscrolls(){
        if(jQuery.browser.mobile !== true){
          //SLIM SCROLL
          $('.slimscroller').slimscroll({
            height: 'auto',
            size: "7px"
          });

          $('.slimscrollleft').slimScroll({
              height: 'auto',
              position: 'right',
              size: "7px",
              color: '#828e94',
              wheelStep: 5
          });
      }
    }
    function toggle_slimscroll(item){
        if($("#wrapper").hasClass("enlarged")){
          $(item).css("overflow","inherit").parent().css("overflow","inherit");
          $(item). siblings(".slimScrollBar").css("visibility","hidden");
        }else{
          $(item).css("overflow","hidden").parent().css("overflow","hidden");
          $(item). siblings(".slimScrollBar").css("visibility","visible");
        }
    }

    // === following js will activate the menu in left side bar based on url ====
    $(document).ready(function() {
        $("#sidebar-menu a").each(function() {
          var pageUrl = window.location.href.split(/[?#]/)[0];
          if (this.href == pageUrl) { 
                $(this).addClass("active");
                $(this).parent().addClass("active"); // add active to li of the current link
                $(this).parent().parent().prev().addClass("active"); // add active class to an anchor
                $(this).parent().parent().prev().click(); // click the item to make it drop
            }
        });
    });


    var resizefunc = [];

If you don't use clicks to initiate the functions, what do you use instead? — Barmar, Nov 09 '18 at 23:59
I'll bet anything this is a duplicate of [event binding on dynamically createdelements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Nov 10 '18 at 00:00
You should post the code *«to select these drop downs and see their children»*. That is where delegation should be implemented. — Louys Patrice Bessette, Nov 10 '18 at 00:18
Original question has been updated; thanks for the reply @Louys Patrice Bessette. I think I'm getting closer, just not sure how to apply the adjustment properly. — Keith Kowalski, Nov 16 '18 at 22:12

score 0 · Answer 1 · answered Nov 10 '18 at 00:48

0

This could because of the redraw event not firing on the browser implicitly after your DOM manipulation. Refer this post on how to redraw so your generated DOM is refreshed on the UI

Force DOM redraw/refresh on Chrome/Mac

If this doesn't work please share your CSS and the before DOM and after DOM generation screenshot

answered Nov 10 '18 at 00:48

Haseeb Afsar

619
5
7

Thanks for the reply @Haseeb Afsar, please see the edit to the question. After some research, I don't believe this is a redraw/refresh issue. – Keith Kowalski Nov 16 '18 at 22:10
@Keith Kowalski. What do you want to do? Override the menuItemClick function to display your custom template? – Haseeb Afsar Jun 15 '19 at 08:07

Appending DOM Loses Menu Drop Down Functionality

1 Answers1