Функция jQuery On Click работает только один раз

Question

Я знаю, что в stackoverflow есть много подобных вопросов, но ни один из них, похоже, не работает для меня.Я думаю, что есть логическая ошибка, которая не позволяет моему событию onClick работать несколько раз.Также я хочу передать атрибут data-id, чтобы указать целевой контейнер по id.Это работает, но только один раз.Я использую это на странице WordPress.Это мой код:

jQuery(document).ready(function($){

    $('.change-aktiviert-btn').on('click', function(){
        var id = $(this).data("id");
        if($('#project-listing-container-'+id).hasClass("grey-bg")) {
            $('#project-listing-container-'+id).removeClass("grey-bg");
        } else {
            $('#project-listing-container-'+id).addClass("grey-bg");
        }
    })

})

соответствующий HTML будет:

<div id="project-listing-container-398" class="project-listing-container "></div>
    <button class="change-aktiviert-btn" data-id="398" onclick="changeStatus('Ja', 1, 398);" type="button" name="qr-link">
                    <div class="project-action-switch">
                        <i class="fas fa-eye"></i>
                    </div>
        </button>

Как я могу это исправить?Спасибо за вашу помощь.

Answer 1

Кажется, работает несколько раз для меня.Демо ниже.Там должно быть что-то еще не хватает в вашем примере.Хотя это не очевидно в вашем вопросе, я подозреваю, что вы заменяете элемент .change-aktiviert-btn в другом месте вашего кода и таким образом теряете прослушиватель событий, который был ему назначен.Вы можете использовать делегирование события , чтобы избежать этого.

$(function(){

    $('body').on('click', '.change-aktiviert-btn', function(){//delegated
        console.log("click");
        var id = $(this).data("id");
        $('#project-listing-container-'+id).toggleClass("grey-bg");
    })

});

function changeStatus(a,b,c){
  //dunno what this is
  console.log(a,b,c);
};

.grey-bg {
background:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="project-listing-container-398" class="project-listing-container ">
I'm the listing container.
</div>
    <button class="change-aktiviert-btn" data-id="398" onclick="changeStatus('Ja', 1, 398);" type="button" name="qr-link">
                    <div class="project-action-switch">
                        <i class="fas fa-eye"></i>
                    </div>
        </button>

Answer 2

Я думаю, что с вашей стороны может отсутствовать информация относительно id.

Пожалуйста, посмотрите рабочий пример здесь https://jsfiddle.net/0suxapvf/ с вашим кодом, где я добавил атрибут data-id для клика.

HTML

<a href="javascript:void(0)" class="change-aktiviert-btn" data-id="1">Click here</a>

<div id="project-listing-container-1">
Project stuff here
</div>

Jquery

$(document).ready(function($){

    $('.change-aktiviert-btn').on('click', function(){
        var id = $(this).attr("data-id");
        if($('#project-listing-container-'+id).hasClass("grey-bg")) {
            $('#project-listing-container-'+id).removeClass("grey-bg");
        } else {
            $('#project-listing-container-'+id).addClass("grey-bg");
        }
    })

})