我的 JQuery removeClass 和 addClass 不起作用

Question

所以我試圖學習使用 json、引導程序和 jquery 進行編碼。 當我單擊帶有removeClass()的導航鏈接時，我試圖刪除所有按鈕的活動 class ，然后當我單擊帶有addClass()的導航鏈接中的某個按鈕時再次添加活動的 class ，但它在我的代碼中不起作用。 這是我的代碼：

HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" width="120"></a>
        <button class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">All Menu</a>
            <a class="nav-item nav-link" href="#">Pizza</a>
            <a class="nav-item nav-link" href="#">Pasta</a>
            <a class="nav-item nav-link" href="#">Nasi</a>
            <a class="nav-item nav-link" href="#">Minuman</a>
          </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row mt-3">
        <div class="col">
            <h1>All Menu</h1>
        </div>
    </div>
    
    <div class="row" id="daftar-menu">
        
    </div>
</div>

JS：

 $.getJSON('data/pizza.json', function(data) {
    let menu = data.menu;
    $('#daftar-menu').empty();
    //looping terhadap object 
    $.each(menu, (index, data) => {  //berikan tiap elemen pada menu sebuah fungsi
        $('#daftar-menu').append(`<div class="col-md-4">
            <div class="card mb-4">
                <img src="img/menu/${data.gambar}" class="card-img-top" alt="...">
                <div class="card-body">
                <h5 class="card-title">${data.nama}</h5>
                <p class="card-text">${data.deskripsi}</p>
                <h5 class="card-title">${data.harga}</h5>
                <a href="#" class="btn btn-primary">Pesan Sekarang</a>
                </div>
            </div>
        </div>`);
    });
});

//everything works fine until this point
$('.nav-link').on('click', function() {
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
});

即使我用警報檢查它，警報也不會起作用。 我錯過了什么嗎？

Answer 1

試試下面的代碼片段。 這將事件設置為在即使在代碼執行后添加的導航鏈接上觸發。

$(document).on('click', '.nav-link', function() {
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
});