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 元素，从而丢失分配给它的事件监听器。您可以使用 event delegation避免这种情况。

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