jquery - 如何使 jquery 单击事件仅在第一次单击时触发

Question

我有两个 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);
        });
    });
});

Answer 1

使用.one()：

$('.navbar1').one('click', function(e) {

click一旦触发它，它就会取消绑定事件。

如果您不希望双击某个元素，则应该使用以下方法：

$(document).on('click', '.navbar1:not(.clicked)', function() {
    // ...
});

要使.navbar1不可点击，只需运行$('.navbar1').addClass('clicked'). 要使其可点击，请执行相反的操作。

Answer 2

请参阅 jQueryone()了解一次性事件处理程序。IE

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();

        $('.basic2').hide().load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

Answer 3

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);
        });
    });
});

Answer 4

使用现代 Js 事件，“一次”！

const navbar = document.getElementsByClassName("navbar1")[0];
navbar.addEventListener("click", function() {
    // Add one-time callback
}, {once : true});

文档,可以使用