jquery - 如果元素具有特定的类，则防止事件触发

Question

我创建了一个ajax加载更多按钮，单击该按钮会获得更多帖子。单击按钮时，将添加一个加载类，然后在输出所有内容后将其删除。

如果按钮具有加载类，是否可以使用 jQuery :not 选择器来停止单击事件触发？

这是一个简短的演示

jQuery('#test_btn:not(.clicked)').click(function(){
    jQuery(this).addClass('clicked');
    console.log('hi');
});

<div id="test_btn">test<br>button</div>

这不是您使用 :not 选择器的方式吗？因为即使添加了加载类，我也能够触发单击事件。

Answer 1

问题是使用附加点击事件的方法仅在页面加载时运行。它永远不会更新。

你应该使用这个:

$(document).on('click','#test_btn:not(.clicked)',function(){
   jQuery(this).addClass('clicked');
    console.log('hi');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test_btn">Click - only works once</button>

当您稍后出现时(例如，当 ajax 调用已加载时)并从按钮中删除 loading 类时，该事件将再次起作用

$(document).on('click','#test_btn:not(.clicked)',function(){
   jQuery(this).addClass('clicked');
    console.log('hi');
});

$(document).on('click','#reset',function(){
   jQuery('#test_btn').removeClass('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test_btn">Click - only works once</button>
<button id="reset">Click to reset</button>