jQuery .on click on generated element-CodePudding

Hi i want to build a navigation where submenus pop up by click on a generated arrow down. Sadly im unable to trigger the click event. I read a few answers to this topic but they don't want to work. I tried the .on method with the additional selector and checked the selectors before the call but the button just doesnt want to trigger.

The html Menu:

<ul >
  <li><a href="#">Nur Link</a></li>
  <li ><a href="#">Nur untermenu Test</a>
  <ul>
    <li><a href='#'>Das ist ein Linktitel</a></li>
    <li><a href='#'>Das ist ein Linktitel</a></li>
    <li><a href='#'>Das ist ein Linktitel</a></li>
    <li><a href='#'>Das ist ein Linktitel</a></li>
  </ul>
</li>
  <li><a href="#">Links zu lang</a></li>
  <li><a href="#">Links mit Favs</a></li>
  <li><a href="#">Links mit CTA</a></li>
  <li><a href="#">Links mit Bild</a></li>
  <li><a href="#">Alles</a></li>
</ul>

The JS:

function checkSize() {
    let size = parseInt($('#responsive-check').css('content').replace('"', ''));
    gSize = size;
    $(window).on('resize', function (e) {
        let size = parseInt($('#responsive-check').css('content').replace('"', ''));
        gSize = size;
    });
}

function modalEvents() {
    let modalOpen
    let $tgt = $('#bars').children('i');
    $('#mobMenu').on('show.bs.modal', function (e) {
        $tgt.removeClass('bi-list');
        $tgt.addClass('bi-x');
    });
    $('#mobMenu').on('hidden.bs.modal', function (e) {
        $tgt.removeClass('bi-x');
        $tgt.addClass('bi-list');
    });
}

var navM = {
    settings: {
        $tgt: $('#main-nav')
    },
    g:{         
        $trigMenu : $('#bars'),
        $data : $('.nav-items')
    },
    init: function (options) {
        jQuery.extend(navM.settings, options);
        navM.openMobile();
        modalEvents();
        navM.collapsedMenu();

    },
    openMobile: function () {        
        let $tgtI = navM.g.$trigMenu.children("i");
        navM.g.$trigMenu.on('click', function () {
            if ($tgtI.hasClass('bi-list')) {                
                dynModal.init("open", navM.g.$data.html());
            } else {
                dynModal.init("close", '');
            }
        })
    },
    collapsedMenu:function(){    
        navM.g.$data.find('.menu-links li').each(function(i){
            let $t = $(this);
            var $button = $('<div></div>').addClass('subs').html('<i ></i>');            
            if($t.children('ul').length>0){
                $t.wrapInner('<div></div>').append('');
                $button.clone(true).appendTo($t.find('div'));   
                console.log($t);
                console.log($button);                                
                $t.children('div').on("click",'.subs', function(){
                    console.log('Make me happy!!!!');
                });
            }            
        })
    }
}

var dynModal = {
    init: function (op, data) {
        let $tgt = $('#mobMenu');
        let $tgtCnt = $tgt.find('.modal-body');
        if (op == "open") {
            $tgtCnt.html(data);
            $tgt.modal('show');
        } else {
            $tgtCnt.html('');
            $tgt.modal('hide');
        }
    }
}

#responsive-check{display:none;content:"0"}.top-nav{display:none}nav#main-nav{height:55px;background:#ededed;display:flex;flex-direction:row;justify-content:space-between;padding:0 15px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;border-bottom:2px solid #fff;position:fixed;z-index:99999;width:100%;top:0}nav#main-nav ul{list-style:none;margin:0;padding:0}nav#main-nav .logo img{max-height:35px;width:auto;margin-top:10px}nav#main-nav .resp-nav{display:flex;flex-direction:row;align-items:center}nav#main-nav .resp-nav .btn{background-color:#fff;display:block;margin:5px 8px 0!important;padding:4px 10px;border:transparent}nav#main-nav .resp-nav .btn i{color:#EF7300;font-size:20px;color:#894200;transition:color,.5s ease-in-out}nav#main-nav .resp-nav .btn:hover i{color:#ffa756}.nav-items{display:none}.menu-links{list-style:none;padding:0;margin:0}.menu-links li{padding:10px 5px;transition:all,.5s;border-bottom:#ccc 1px solid}.menu-links li a{display:block;text-decoration:none;font-family:roboto;font-size:15px;color:#222;flex-grow:2}.menu-links li ul{list-style:none;margin:0;padding:0 0 0 10px;display:none}.menu-links li ul li{border-bottom:0;color:#333}.menu-links li ul li:after{content:"";display:block;width:100px;height:1px;background-color:#ccc;width:0;transition:width,.5s}.menu-links li ul li:hover:after{width:100px}.menu-links li.has-subs div{display:flex;flex-direction:row;justify-content:space-between}.menu-links li.has-subs div div.subs{background-color:#EF7300;margin:-10px -5px -10px 0;padding-top:10px;transition:background-color,.5s;cursor:pointer}.menu-links li.has-subs div div.subs i{color:#fff;margin:8px}.menu-links li.has-subs div div.subs:hover{background-color:#ffa756}.menu-links li:hover,.menu-links li.has-subs:hover{background-color:#fff;padding-left:10px}form{display:flex;flex-direction:row;margin-bottom:15px;align-items:center}form input.search-field{width:100%;border-top-left-radius:50px;border-bottom-left-radius:50px;padding:5px;border:0;padding:5px 15px}form input.search-field:active,form input.search-field:focus-visible,form input.search-field:focus{border-color:transparent!important;border:0}form button.search-submit{background-color:#fff;border:0;border-top-right-radius:50px;border-bottom-right-radius:50px;padding:6px 10px 5px}form button.search-submit i{background-color:#EF7300;border-radius:40px;padding:3px 7px;color:#fff;transition:background-color,.5s}form button.search-submit i:hover{background-color:#894200}#mobMenu .modal-body{background-color:#ddd}@media (min-width:576px){#responsive-check{display:none;content:"576"}}@media (min-width:768px){#responsive-check{display:none;content:"768"}}

<!doctype html>
<html lang="en">
  <head>
    <title>Standard Template</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Bootstrap icon Font -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    
    <!-- CSS IMPORTE-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">

    <!-- Benutzerdeffinierte CSS -->
    

  </head>
  <body>
    <div  id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
      <div >
        <div >          
          <div >
          </div>
        </div>
      </div>
    </div>
    <!-- Obere Navigation-->
     <nav >
        <div >
            <div >
                <div >
                    <i ></i> 040 / 225 689 788 <span ></span><i ></i> <a href="#">[email protected]</a>
                </div>
                <div >
                    <a href="#">Impressum</a> <span ></span> <a href="#">Datenschutzverordnung</a> <span ></span> <a href="#">Kontakt</a>
                </div>
            </div>
        </div>
     </nav>   
     <!-- Hauptnavigation-->
     <nav id="main-nav">
       <a href="#" ><img src="img/logo.png"></a>       
      <div >
        <buttton  id="bars"><i ></i></buttton>
        <buttton  ><i ></i></buttton> 
       </div>  
     </nav>
     <div >
      <form>
        <input type="input" placeholder="Suchbegriff" >
        <button type="submit" ><i ></i></button>
      </form>
    <ul >
      <li><a href="#">Nur Link</a></li>
      <li ><a href="#">Nur untermenu Test</a>
      <ul>
        <li><a href='#'>Das ist ein Linktitel</a></li>
        <li><a href='#'>Das ist ein Linktitel</a></li>
        <li><a href='#'>Das ist ein Linktitel</a></li>
        <li><a href='#'>Das ist ein Linktitel</a></li>
      </ul>
    </li>
      <li><a href="#">Links zu lang</a></li>
      <li><a href="#">Links mit Favs</a></li>
      <li><a href="#">Links mit CTA</a></li>
      <li><a href="#">Links mit Bild</a></li>
      <li><a href="#">Alles</a></li>
    </ul>
   </div>

  
  
     <div id="responsive-check"></div>    
    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


    <!-- Zusätzliche Bibliotheken -->

    <!-- JSON-->
    
    <!-- Benutzerdeffiniertes JS -->
    
  </body>
</html>

collapsedMenu:function(){    
    navM.g.$data.find('.menu-links li').each(function(i){
        let $t = $(this);
        var $button = $('<div></div>').addClass('subs').html('<i ></i>');            
        if($t.children('ul').length>0){
            $t.wrapInner('<div></div>').append('');
            $button.clone(true).appendTo($t.find('div'));   
            console.log($t);
            console.log($button);                                
            $t.children('div').on("click",$button, function(){
                console.log('make me happy!!!!!!');
            });
        }            
    })
}

}

CodePudding user response：

In the openMobile function, you put the html in the modal dynModal.init("open", navM.g.$data.html());, which results in inactive events.

You need to change like this:

dynModal.init("open", navM.g.$data);

In modal variable:

$tgtCnt.html(data.children());

Full code in here:

function modalEvents() {
        let modalOpen
        let $tgt = $('#bars').children('i');
        $('#mobMenu').on('show.bs.modal', function (e) {
            $tgt.removeClass('bi-list');
            $tgt.addClass('bi-x');
        });
        $('#mobMenu').on('hidden.bs.modal', function (e) {
            $tgt.removeClass('bi-x');
            $tgt.addClass('bi-list');
        });
    }

    var navM = {
        settings: {
            $tgt: $('#main-nav')
        },
        g: {
            $trigMenu: $('#bars'),
            $data: $('.nav-items'),
            $modal: $('#mobMenu')
        },
        init: function (options) {
            jQuery.extend(navM.settings, options);
            navM.openMobile();
            modalEvents();
            navM.collapsedMenu();

        },
        openMobile: function () {
            let $tgtI = navM.g.$trigMenu.children("i");
            navM.g.$trigMenu.on('click', function () {
                if ($tgtI.hasClass('bi-list')) {
                    dynModal.init("open", navM.g.$data);
                } else {
                    dynModal.init("close", '');
                }
            })
        },
        collapsedMenu: function () {
            navM.g.$data.find('.menu-links li').each(function (i) {
                let $t = $(this);
                var $button = $('<div></div>').addClass('subs').html('<i ></i>');

                if ($t.children('ul').length > 0) {
                    $t.wrapInner('<div></div>').append('');
                    $button.clone(true).appendTo($t.find('div'));

                    $t.children('div').on("click",$button, function(){
                        console.log('make me happy!!!!!!');
                    });
                }
            })
        }
    }

    var dynModal = {
        init: function (op, data) {
            let $tgt = $('#mobMenu');
            let $tgtCnt = $tgt.find('.modal-body');
            if (op == "open") {
                $tgtCnt.html(data.children());
                $tgt.modal('show');
            } else {
                $tgtCnt.html('');
                $tgt.modal('hide');
            }
        }
    }
    navM.init()

#responsive-check{display: none;content: "0"}.top-nav{display: none}nav#main-nav{height: 55px;background: #ededed;display: flex;flex-direction: row;justify-content: space-between;padding: 0 15px;box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;border-bottom: 2px solid #fff;position: fixed;z-index: 99999;width: 100%;top: 0}nav#main-nav ul{list-style: none;margin: 0;padding: 0}nav#main-nav .logo img{max-height: 35px;width: auto;margin-top: 10px}nav#main-nav .resp-nav{display: flex;flex-direction: row;align-items: center}nav#main-nav .resp-nav .btn{background-color: #fff;display: block;margin: 5px 8px 0 !important;padding: 4px 10px;border: transparent}nav#main-nav .resp-nav .btn i{color: #EF7300;font-size: 20px;color: #894200;transition: color, .5s ease-in-out}nav#main-nav .resp-nav .btn:hover i{color: #ffa756}.nav-items{display: none}.menu-links{list-style: none;padding: 0;margin: 0}.menu-links li{padding: 10px 5px;transition: all, .5s;border-bottom: #ccc 1px solid}.menu-links li a{display: block;text-decoration: none;font-family: roboto;font-size: 15px;color: #222;flex-grow: 2}.menu-links li ul{list-style: none;margin: 0;padding: 0 0 0 10px;display: none}.menu-links li ul li{border-bottom: 0;color: #333}.menu-links li ul li:after{content: "";display: block;width: 100px;height: 1px;background-color: #ccc;width: 0;transition: width, .5s}.menu-links li ul li:hover:after{width: 100px}.menu-links li.has-subs div{display: flex;flex-direction: row;justify-content: space-between}.menu-links li.has-subs div div.subs{background-color: #EF7300;margin: -10px -5px -10px 0;padding-top: 10px;transition: background-color, .5s;cursor: pointer}.menu-links li.has-subs div div.subs i{color: #fff;margin: 8px}.menu-links li.has-subs div div.subs:hover{background-color: #ffa756}.menu-links li:hover, .menu-links li.has-subs:hover{background-color: #fff;padding-left: 10px}form{display: flex;flex-direction: row;margin-bottom: 15px;align-items: center}form input.search-field{width: 100%;border-top-left-radius: 50px;border-bottom-left-radius: 50px;padding: 5px;border: 0;padding: 5px 15px}form input.search-field:active, form input.search-field:focus-visible, form input.search-field:focus{border-color: transparent !important;border: 0}form button.search-submit{background-color: #fff;border: 0;border-top-right-radius: 50px;border-bottom-right-radius: 50px;padding: 6px 10px 5px}form button.search-submit i{background-color: #EF7300;border-radius: 40px;padding: 3px 7px;color: #fff;transition: background-color, .5s}form button.search-submit i:hover{background-color: #894200}#mobMenu .modal-body{background-color: #ddd}@media (min-width: 576px){#responsive-check{display: none;content: "576"}}@media (min-width: 768px){#responsive-check{display: none;content: "768"}}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div  id="mobMenu" data-bs-backdrop="false" tabindex="-1" aria-hidden="true">
    <div >
        <div >
            <div >
            </div>
        </div>
    </div>
</div>
<!-- Obere Navigation-->
<nav >
    <div >
        <div >
            <div >
                <i ></i> 040 / 225 689 788 <span ></span><i
                    ></i> <a href="#">[email protected]</a>
            </div>
            <div >
                <a href="#">Impressum</a> <span ></span> <a href="#">Datenschutzverordnung</a> <span
                    ></span> <a href="#">Kontakt</a>
            </div>
        </div>
    </div>
</nav>
<!-- Hauptnavigation-->
<nav id="main-nav">
    <a href="#" ><img src="img/logo.png"></a>
    <div >
        <buttton  id="bars"><i ></i></buttton>
        <buttton  ><i ></i></buttton>
    </div>
</nav>
<div >
    <form>
        <input type="input" placeholder="Suchbegriff" >
        <button type="submit" ><i ></i></button>
    </form>
    <ul >
        <li><a href="#">Nur Link</a></li>
        <li ><a href="#">Nur untermenu Test</a>
            <ul>
                <li><a href='#'>Das ist ein Linktitel</a></li>
                <li><a href='#'>Das ist ein Linktitel</a></li>
                <li><a href='#'>Das ist ein Linktitel</a></li>
                <li><a href='#'>Das ist ein Linktitel</a></li>
            </ul>
        </li>
        <li><a href="#">Links zu lang</a></li>
        <li><a href="#">Links mit Favs</a></li>
        <li><a href="#">Links mit CTA</a></li>
        <li><a href="#">Links mit Bild</a></li>
        <li><a href="#">Alles</a></li>
    </ul>
</div>


<div id="responsive-check"></div>