Question

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

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

这是一个简短的演示

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

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

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

Answer 1

在动态添加类时，需要使用委托的事件处理程序，以便遵守:not()选择器：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test_btn">test<br>button</div>

或者，如果此逻辑的唯一目的是仅允许元素单击一次，则只需使用one()：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test_btn">test<br>button</div>

Answer 2

问题在于，使用这种附上click事件的方法只能在页面加载时运行。它永远不会更新。

您应该使用此：

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

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

2 个答案: