如何仅在第一次单击时触发jquery单击事件
我有两个div(.basic1和.basic2)。 我希望.basic1在点击时淡出,而.basic2在淡入淡出,我工作得非常好。 唯一的问题是,一旦.basic2淡入,如果用户继续点击链接(.navbar1),它将一遍又一遍淡入此div。 我知道我需要使用.bind()函数,但我似乎无法弄清楚我的代码中的位置。 谢谢!
$(document).ready(function() { $('.navbar1').click(function(e){ e.preventDefault(); $('.basic2').hide().load('.basic2', function() { $(this).delay(600).fadeIn(1000); $('.basic1').fadeOut(1000); }); }); });
使用.one()
:
$('.navbar1').one('click', function(e) {
触发后,它会解除click
事件的绑定。
如果你不想双击一个元素,这样的东西应该工作:
$(document).on('click', '.navbar1:not(.clicked)', function() { // ... });
要使.navbar1
无法点击,只需运行$('.navbar1').addClass('clicked')
。 要使其可点击,请执行相反的操作。
请参阅jQuery one()
以获取一次性事件处理程序。 即
$(document).ready(function() { $('.navbar1').one('click', function(e){ e.preventDefault(); $('.basic2').hide().load('.basic2', function() { $(this).delay(600).fadeIn(1000); $('.basic1').fadeOut(1000); }); }); });
jQuery完全为此提供了.one()方法。
$(document).ready(function() { $('.navbar1').one('click', function(e){ e.preventDefault(); $('.basic2').hide() .load('.basic2', function() { $(this).delay(600).fadeIn(1000); $('.basic1').fadeOut(1000); }); }); });
使用现代Js事件,“一次”!
const navbar = document.getElementsByClassName("navbar1")[0]; navbar.addEventListener("click", function() { // Add one-time callback }, {once : true});
文档 , CanIUse