即使我使用的是 :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>

我不想要“加载！” 按钮激活'.user-card:not(.loaded)'事件侦听器，但它确实如此。 为什么是这样？

Answer 1

每次点击后都会触发点击事件，因为您不会在每次点击后重新分配点击事件。 关于如何解决这个问题，您有多种选择。 我在这里的一种方法是在单击时查看“加载”类。 如果它没有“加载”类，则它运行代码。 否则警报会触发，让您知道元素已经加载。

 $('.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”