即使我使用的是 :not 选择器，也会触发事件侦听器

Question

 $('.user-card:not(.loaded)').click(function(e) { $(e.target).addClass('loaded'); $(e.target).text('loaded!'); console.log('this is now loaded'); }); $('.loaded').click(function() { alert('already loaded!') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="user-card"> not loaded </button> <button type="button" class="user-card"> not loaded </button>

I don't want the "loaded!" button to acctivate the '.user-card:not(.loaded)' event listener, yet it does. Why is this?

Answer 1

The click event will fire every time because you aren't reassigning click events after each click. You have multiple choices on how to address this. One way I have here is to look at the "loaded" class on the click. If it does not have the class "loaded" then it runs the code. Otherwise the alert fires to let you know the element has already been loaded.

 $('.user-card:not(.loaded)').click(function(e) { if (!$(e.target).hasClass('loaded')) { $(e.target).addClass('loaded'); $(e.target).text('loaded!'); console.log('this is now loaded'); } else { alert('already loaded!'); } }); $('.loaded').click(function() { alert('already loaded!'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="user-card"> not loaded </button> <button type="button" class="user-card"> not loaded </button> <button type="button" class="user-card loaded"> loaded </button>

Answer 2

通过从父级继承属性，两个按钮都“未加载”，请改用“.hasClass”