我创建了一个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
选择器的方式吗?因为即使添加了加载类,我也能够触发单击事件。
最佳答案
问题是使用附加点击事件的方法仅在页面加载时运行。它永远不会更新。
你应该使用这个:
$(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>
关于jquery - 如果元素具有特定的类,则防止事件触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54368009/