jquery .on ("Klick") funktioniert nicht nach .off ("Klick")

Question

ich etwas Hilfe gebrauchen könnte Debuggen dies:

var factBody = jQuery(".fact__body"); 

jQuery(".fact").on("click", function() { 
    jQuery(".fact").not(this).addClass("fact-inactive"); 
    jQuery(this).addClass("fact-active"); 
    jQuery(".fact").off("click"); 

    var indexOfClicked = jQuery(this).index(); 
    var descriptionOfIndex = 
    jQuery(".fact__description").eq(indexOfClicked - 1); 

jQuery(factBody).show().addClass("active").append(descriptionOfIndex); 
}); 

jQuery(".fact-close").on("click", function() { 
    jQuery(factBody).hide().removeClass("active"); 
    jQuery(".fact").removeClass("fact-inactive fact-active"); 
    jQuery(".fact").on("click"); 
}); 

https://jsfiddle.net/left23/yyoxpk9j/

Nachdem ein Element geklickt wird, ich das entfernen Klick-Handler mit der Methode .off. Das funktioniert. Wenn das Textfeld angezeigt wird, sind die Elemente nicht mehr anklickbar. So verhindere ich, dass mehr als ein Panel gleichzeitig geöffnet wird.

Wenn das Textfeld geschlossen ist, indem ich auf die Schaltfläche "Schließen" klicke, versuche ich den Click-Handler erneut hinzuzufügen, aber das schlägt fehl. Ich kann nicht klar sehen warum.

Vielen Dank im Voraus. Bitte lassen Sie mich wissen, wenn mehr Klärung erforderlich ist.

Answer 1

Das Problem ist, dass .on('click') keine Erinnerung an Ihre vorherigen Ereignisse hat. Sie müssen es zu einer Funktion machen, die Sie aufrufen können, so

var factBody = jQuery(".fact__body"); 
var handleClickEvent = function() { 
    jQuery(".fact").not(this).addClass("fact-inactive"); 
    jQuery(this).addClass("fact-active"); 
    jQuery(".fact").off("click", handleClickEvent); 

    var indexOfClicked = jQuery(this).index(); 
    var descriptionOfIndex = 
     jQuery(".fact__description").eq(indexOfClicked - 1); 

    jQuery(factBody).show().addClass("active").append(descriptionOfIndex); 
} 

jQuery(".fact").on("click", handleClickEvent); 

jQuery(".fact-close").on("click", function() { 
    jQuery(factBody).hide().removeClass("active"); 
    jQuery(".fact").removeClass("fact-inactive fact-active"); 
    jQuery(".fact").on("click", handleClickEvent); 
});