unbind（'click'）无效

Question

当我按$('.walk-previous-button')时，我想禁用点击事件，直到动画结束。以下不起作用。

$('.walk-previous-button').live('click',function() {
        var stringcontainer = $('#walk-string-parent-container');

    $('.walk-previous-button').unbind('click'); 

        stringcontainer.animate({'scrollLeft': '-=340'}, 1500,function() {
    $('.walk-previous-button').bind('click');
    //code
        }

    });

Answer 1

尝试使用:animated selector检查元素是否正在设置动画。

$('.walk-previous-button').live('click',function() {
    if(!$(this).is(':animated')){
      var stringcontainer = $('#walk-string-parent-container');
      stringcontainer.animate({'scrollLeft': '-=340'}, 1500, function(){
        // code
      });
    }
});

Answer 2

试试这个：

$('.walk-previous-button:not(:animated)').live('click',function(){
    var stringcontainer = $('#walk-string-parent-container');
    stringcontainer.animate({'scrollLeft': '-=340'}, 1500, function(){
        // code
    });
});

仅将其绑定到未设置动画的元素

Answer 3

由于您在live上使用$('.walk-previous-button')取消绑定将无效，请使用die代替删除使用live附加的所有事件处理程序。

$('.walk-previous-button').die('click');

如果没有特定原因可以使用live，那么您可以使用click和bind('click')绑定/取消绑定事件处理程序。

正如@Rocket建议你也可以使用unbind('click')选择器检查元素是否正在动画化，然后采取相应的行动。

Answer 4

如果使用jQuery 1.7 +

$(document).on('click', '.walk-previous-button' ,AnimateWalkString);

function AnimateWalkString() {
    $(document).off('click', '.walk-previous-button' ,AnimateWalkString);
    var elm = $('#walk-string-parent-container');
    elm.animate({'scrollLeft': '-=340'}, 1500, function() {
        $(document).on('click', '.walk-previous-button' ,AnimateWalkString);
    });
}

或者只是设置一个标志

var flag=true;
$('.walk-previous-button').live('click', function() {
    if (flag) {
        flag=false;
        var elm = $('#walk-string-parent-container');
        elm.animate({'scrollLeft': '-=340'}, 1500,function() {
            flag=true;
        });
    }
});