Jquery 无法将 class 添加到动态添加的导航链接

Question

我有一个 JQuery 代码，可将导航链接动态添加到导航项。 问题是单击时此导航链接不会变为活动状态。 我试图动态地给它活动的 class 但它不接受它。 似乎在页面重新加载后一切都是 rest 并且它始终是第一个采用活动 class 的导航链接。

它当然包含在$(document).read()中。 我也尝试将它包装在$(window).load()但同样的问题。

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

如果您能发现问题，我将不胜感激您的指导。

Answer 1

因为当您定义单击处理程序时要添加的元素不存在，所以最好使用 jQuery 中的 delegate() 方法。

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