Как сделать событие jquery click event только при первом щелчке

У меня есть два 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);
        });
    });
});

Ответ 1

Используйте .one():

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

Отключает событие click после его запуска.

Если вы не хотите, чтобы элемент был дважды щелкнул, что-то вроде этого должно работать:

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

Чтобы сделать .navbar1 unclickable, просто запустите $('.navbar1').addClass('clicked'). Чтобы сделать его интерактивным, сделайте обратное.

Ответ 2

Обратитесь к 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);
        });
    });
});

Ответ 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);
        });
    });
});

Ответ 4

Используйте современные события Js, с "один раз"!

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

Документация, CanIUse