如何使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);
        });
    });
});

使用：

一旦触发

单击事件，它将解除绑定该事件

如果您不希望双击某个元素，那么类似这样的操作应该可以：

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

要使
.navbar1
不可点击，只需运行
$（'.navbar1'）.addClass（'clicked'）
。要使其可单击，请执行相反的操作。
有关一次性事件处理程序，请参阅jQuery。i、 e

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

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

jQuery正好提供了这个方法

$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();
        $('.basic2').hide() 
        .load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

使用现代Js事件，使用“一次”！
，
Bah，破坏了我的响应时间+1.@jcesar:谢谢，我已经添加了它。如果我只想在您不只是单击的情况下启动“单击”功能，该怎么办？navbar1？这可能吗？@user1745398:我不完全确定你的意思，但请参阅我的编辑。更好地解释，然后在jQuery文档上解释如果你需要支持IE11，请使用来自
$(document).ready(function() {
    $('.navbar1').one('click', function(e){
        e.preventDefault();
        $('.basic2').hide() 
        .load('.basic2', function() {
            $(this).delay(600).fadeIn(1000);
            $('.basic1').fadeOut(1000);
        });
    });
});

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