Jquery can't add class to dynamicly added nav-link

Question

I have a JQuery code that adds a nav-link dynamicly to a nav-item. The problem is this nav-link doesn't change to active when clicked. I tried to dynamicly give it the active class but it doesn't take it. it seems after the page reloads everything is rest and it's always the first nav-link that takes the active class.

It's of course wrapped inside $(document).read() . I also tried to wrap it inside $(window).load() but same problem.

 $('#A').append('<li class="nav-item">' + '<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' + '</li>'); $(document).on('click', '.collapse li', function(e) { $(this).addClass('active').siblings().removeClass('active'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault"> <ul class="navbar-nav accordion" id="SideBar"> <li class="nav-item"> <a class="nav-link" href="{{index}}">home</a> </li> <li class="nav-item"> <a class="nav-link" href="{{list}}">list</a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne"> A </a> </li> <ul class="collapse" id="A" data-parent="#SideBar"> <li class="nav-item"> <a class="nav-link" href="{{B}}">B</a> </li> <li class="nav-item"> <a class="nav-link" href="{{C}}">C</a> </li> </ul> </div>

If you can spot the problem I'd appreciate your guidance.

Answer 1

Because elements that you are appending not exist when you define the the click handler better to use the delegate() method from jQuery.

 $('#A').append( '<li class="nav-item">' +'<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' +'</li>'); $('.collapse ').delegate('li','click',function(e) { e.preventDefault(); $( this ).addClass( 'active' ).siblings().removeClass( 'active' ); });

 .collapse li.active a{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault" > <ul class="navbar-nav accordion" id="SideBar"> <li class="nav-item"> <a class="nav-link" href="{{index}}">home</a> </li> <li class="nav-item"> <a class="nav-link" href="{{list}}" >list</a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne" > A </a> </li> <ul class="collapse" id="A" data-parent="#SideBar" > <li class="nav-item"> <a class="nav-link" href="{{B}}" >B</a> </li> <li class="nav-item"> <a class="nav-link" href="{{C}}" >C</a> </li> </ul>