jQuery deaktivieren Event-Handler von Link

Question

hier aktivieren ist der Code: http://jsfiddle.net/4WyPq/

Also im Grunde, wenn ich auf ‚button1‘ es animiert dann deaktiviert die Taste, danach muß ich button2 drücken und das ‚button1‘ Ereignis zu aktivieren, so Ich drücke erneut 'Taste1' es sollte das gleiche Ereignis machen.

Answer 1

Wenn Sie ein Click-Ereignis an einen Link binden, müssen Sie die Click-Handler-Funktion einschließen.

$(this).bind('click'); 

tut nichts, weil es keine Handler-Funktion gibt. Sie müssten die Click-Handler-Funktion erneut übergeben, wenn Sie sie erneut binden möchten. Sie können dies tun, indem Sie den Click-Handler in seine eigene lokale Funktion aufbrechen und diese Funktion dann jedes Mal verwenden, wenn Sie das click-Ereignis binden. Könnte man so tun, wie folgt:

function bindA1(force) { 
    var a1 = $('.a1'); 
    if (force || a1.hasClass("disabled")) { 
     a1.click(function() { 
      $(this) 
       .addClass("disabled") 
       .unbind("click") 
       .animate({"top": "+=50px"}, "slow"); 
      return(false); 
     }).removeClass("disabled"); 
    } 
} 

bindA1(true); 

$('.a2').click(function() { 
    bindA1(); 
    return(false); 
}); 

Arbeiten Demo hier: http://jsfiddle.net/jfriend00/3kjaR/

Wenn Sie wirklich beabsichtigen, die Handler für Links wie diese zu aktivieren und zu deaktivieren, kann es einfacher sein, nur eine Eigenschaft, die Sie überprüfen anstatt die Event-Handler tatsächlich zu entfernen.

Sie könnten ein Flag wie folgt verwenden:

$('.a1').click(function(){ 
    if (!$(this).data("disabled")) { 
     $('.a1').animate({"top": "+=50px"}, "slow"); 
     $(this).data("disabled", true); 
    } 
}); 

$('.a2').click(function(){ 
    $(".a1").data("disabled", false); 
}); 
​ 

Arbeiten Demo hier: http://jsfiddle.net/jfriend00/NSZ8P/

Answer 2

• Verwendung .off() der Handler
• Verwendung .on() zu entfernen, es zu binden wieder
• Verwendung ein wiederverwendbare Funktion zum Binden

demo:

$(function() { 

    function clickHandler() { 
     $(this).animate({ 
      "top": "+=50px" 
     }, "slow").off('click'); 
     return false; 
    } 

    $('.a1').on('click', clickHandler); 

    $('.a2').on('click',function() { 
     $('.a1').on('click', clickHandler); 
     return false; 
    }); 
});​ 

Answer 3

ich mit Ihrer Geige gespielt, und gab dir eine andere Option, statt mit den Speicherplätzen für die bind Fall durcheinander und mit allen verwirrt zu bekommen ... versuchen Sie dies:

http://jsfiddle.net/4WyPq/2/

$('.a1').click(function(){ 
    if(!$(this).hasClass("disabled")){ 
     $(this).addClass("disabled"); 
     $('.a1').animate({"top": "+=50px"}, "slow"); 
    } 
}); 

$('.a2').click(function(){ 
    $(".a1").removeClass("disabled"); 
});