Wie zu binden, zu lösen und erneut binden (click) Ereignisse in JQuery

Question

Nach der gleichen Frage vor 2 Wochen here fragen, ich „die“ Lösung, die schließlich gefunden. Deshalb beantworte ich meine eigene Frage. ;)

So binden, UNBIND UND REBIND EVENTS IN JQUERY?

Answer 1

Und das ist die perfekte Lösung. (Mindestens für mich.)

$(document).on('click', 'a#button', function(){ 
    $(this).after('<span> hello</span>'); 
    $('span').fadeOut(1000); 
}); 

$('a#toggle').toggle(
    function(){ 
     $(this).text('rebind'); 
     $('a#button').on('click.disabled', false); 
    }, 
    function(){ 
     $(this).text('unbind'); 
     $('a#button').off('click.disabled'); 
    } 
); 

".on()" tut es. Hinweis: Es ist wichtig, das Ereignis zu binden, wie Sie in der ersten Zeile sehen können! Es funktioniert nicht mit .click() oder ...!

Siehe docs!

Here is a fiddle, es zu versuchen und damit experimentieren!

Viel Spaß!

Answer 2

Diese Funktion erweitert jQuery um einen Operator, der Ereignishandler wie .on anfügt. Außerdem wird verhindert, dass mehr als eine einzelne Instanz eines bestimmten Handlers an den Selektor angehängt wird.

Beachten Sie, dass das Entfernen und erneute Anhängen von Ereignishandlern die Reihenfolge ändert, in der sie angehängt sind.

(function ($) { 
    $.fn.reBind = function(events, handler) { 
     return this.off(events, handler).on(events, handler); 
    }; 
}(jQuery)); 

Answer 3

Eine einfachere und kürzere Lösung besteht darin, dem Objekt eine Klasse hinzuzufügen, wenn Sie die Bindung lösen wollen, und dann diese Klasse entfernen, um ex wieder zu binden;

$('#button').click(function(){ 
    if($(this).hasClass('unbinded')) return; 
    //Do somthing 
}); 

$('#toggle').click(function(){ 
    $('#button').toggleClass('unbinded'); 
});