unbind ('click') funktioniert nicht

Question

Wenn ich $('.walk-previous-button') drücke, möchte ich das Klickereignis deaktivieren, bis die Animation beendet ist. Das Folgende funktioniert nicht.

$('.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

Probieren Sie die :animated selector, um zu überprüfen, ob das Element animiert wird.

$('.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

Versuchen Sie folgendes:

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

Nur binden es Elemente, die nicht

Answer 3

animiert Da Sie unbind live auf $('.walk-previous-button') verwenden wird nicht funktionieren, verwenden die stattdessen alle Event-Handler zu entfernen angebracht unter Verwendung live.

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

Wenn es keinen besonderen Grund ist live zu verwenden, dann click verwenden, dann können Sie verwenden bind('click') und unbind('click') zu binden/entbinden den Event-Handler.

Wie @Rocket vorgeschlagen hat, können Sie auch überprüfen, ob das Element animiert wird, indem Sie :animated Selektor verwenden und dann entsprechend handeln.

Answer 4

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

Oder setzen Sie nur ein Flag

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

mit