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>