Question

我只是想在播放动画时禁用按钮的点击功能。

请注意，在最终用途中，我使用的是jQuery触发的CSS动画，因此我无法检查是否 .is（'：animated'）。

我的解决方案是在动画期间更改按钮上的活动类，但是jQuery似乎没有意识到我已经改变了它。

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

问题是您为文档就绪设置了按钮的事件处理程序（我想）。这意味着此时处于活动状态的所有按钮都将设置事件处理程序。

说： $('.active')
你只是选择了一堆DOM元素，

并说 .on("click", function () {
你只需为每个人添加一个点击处理程序。

如果稍后删除.active类，则不会删除先前设置的事件处理程序，因此单击操作将继续有效。

解决方案确实是检查事件处理程序中的.active类，就像@boz一样。

Answer 4

好吧，既然你不能使用:animated，如果你能以某种方式选择一个父母，那么使用代理看起来就像是一个更干净的解决方案。

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

虽然这里的其他答案也应该有效。

如何在动画期间禁用按钮？

4 个答案: