jQueryの.on（ "クリック"）.off後に動作していない（ "クリック"）

Question

私はこのデバッグいくつかの助けを使用することができます。項目がクリックされた後

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/

を、私は削除.offメソッドを使用してクリックハンドラをクリックします。これは機能します。そのため、テキストパネルが表示されても、アイテムはクリックできなくなります。これは、一度に複数のパネルを開くことを防止する方法です。

テキストパネルが閉じているときに、「閉じる」ボタンをクリックすると、クリックハンドラをもう一度追加しようとしますが、これは失敗します。なぜ私は明らかに見ることができません。

ありがとうございます。より明確にする必要がある場合はお知らせください。

Answer 1

問題は.on('click')に以前のイベントのメモリがないことです。

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