Как отключить кнопку во время анимации?

Question

Я просто пытаюсь отключить возможность нажатия кнопки во время анимации.

Обратите внимание, что в конечном использовании я использую анимацию CSS, запущенную jQuery, поэтому я не могу просто проверить, .is (': animated').

Мое решение состоит в том, чтобы изменить активный класс на кнопке во время анимации, но jQuery, похоже, не понимает, что я его изменил.

Test Case: http://jsfiddle.net/Ct2TZ/

HTML:

<a href="#" class="button active">Click Me</a> 

JQuery:

var myFunction = function() { 
    $('.button').removeClass('active'); 
    $('.result').append('clicked<br> '); 
    $('.result').animate({ 
     width: '200px' 
    }, 2000, function() {   
     $('.result').css({width: '75px'}); 
     $('.button').addClass('active'); 
    }); 
} 

// THIS SHOULD NOT WORK DURING ANIMATION 
$('.active').on("click", function() { 
    myFunction(); 
}); 

Answer 1

Видя, как вы не можете использовать :animated почему бы не просто проверить, если button вы щелкаете имеет класс active в теме?

$('.button').on("click", function() { 
    if($(this).hasClass('active')){ 
    myFunction(); 
    } 
}); 

http://jsfiddle.net/GPRnr/

Answer 2

Вы можете использовать on() и off(), поэтому они там, чтобы связать и разрывания обработчики событий:

var myFunction = function() { 
    $('.button').off('click'); 
    $('.result').append('clicked<br> ') 
       .animate({ width: '200px' }, 2000, function() {   
     $('.result').css({width: '75px'}); 
     $('.button').on("click", myFunction); 
    }); 
} 

$('.button').on("click", myFunction); 

FIDDLE

Answer 3

Ну, так как вы можете» t используйте :animated, если вы можете каким-то образом выбрать родителя, используя делегаты, посмотрите li ke - всецело чистое решение.

$(parent).on('click', '.active', myFunction); 

Хотя другие ответы здесь также должны работать.

Answer 4

Проблема в том, что вы устанавливаете обработчик событий для кнопок на готовом документе (я полагаю). Это означает, что все кнопки, которые активны в этот момент, будут иметь обработчик событий.

Говоря
$('.active')
вы просто выбирающий кучу элементов DOM,

и говоря
.on("click", function() {
вы просто добавить обработчик щелчка к каждому из них.

Когда вы позже удалите класс .active, вы не удаляете обработчик событий, который вы установили ранее, и, таким образом, действие click продолжает работать.

Решение действительно будет проверять класс .active внутри обработчика событий, точно так же, как @boz.