3

我只是试图在动画触发时禁用按钮被点击的能力。

请注意，在最终使用中，我使用的是由 jQuery 触发的 CSS 动画，所以我不能只检查是否为 .is(':animated')。

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

测试用例：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();
});
4

4 回答 4

6

既然你不能使用:animated为什么不检查button你点击的是否有一个类active呢？

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

http://jsfiddle.net/GPRnr/

于 2013-06-14T15:15:36.633 回答
2

您可以使用on()andoff()来绑定和取消绑定事件处理程序，这就是它们存在的原因：

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

小提琴

于 2013-06-14T15:16:42.283 回答
1

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

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

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

当您稍后删除.active该类时，您不会删除您之前设置的事件处理程序，因此单击操作会继续工作。

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

于 2013-06-14T15:22:43.140 回答
0

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

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

尽管这里的其他答案也应该有效。

于 2013-06-14T15:20:55.743 回答