jQueryクローンが同じdivの複数を作成しています

Question

私は以下のコードをほぼ完璧に取り入れていますが、同じdivを複数回クローンしています。

残念ながら、一度選択して一度選択を解除すると、他のものを選択すると倍数が表示されます。私はこれがクローニングと関係があると仮定しています。

function selectGameItem() { 

    $('.inventory-item').on('change', function() { 

     var cloneDiv = $(this).clone(); 

     if($(this).parent('.game-inventory').length) { 

      $('.receive-window').append(cloneDiv); 
      $(this).addClass('selected-item'); 

     } else { 

      $(this).remove(); 
      $('.game-label-' + inventoryValue).removeClass('selected-item'); 

     } 

     selectGameItem(); 

    }); 

    } 

} 

Answer 1

あなたchangeハンドラの最後の行であるselectGameItem();への呼び出しを削除します。あなたがそこにそのラインを持っていた場合には

など、彼らが実行したときに、彼らは再びselectGameItem()を呼び出し、よりハンドラをバインドし、そのイベントが重複したハンドラを発生する次の時間が実行され、既にハンドラを持っている要素に対して.on('change')を呼び出しますchangeハンドラをクローンアイテムにバインドするには、その必要はありません。あなたもuse .clone(true) to clone the event handlersすることができます。

$('.inventory-item-hold').on('change', function() { 

へ：または、おそらくより良いが、ちょうどこの行を変更することにより、委任イベントハンドラを使用して、自動的に'.inventory-item-hold'クラスを持って動的に追加されている任意の要素で動作します

$(document).on('change', '.inventory-item-hold', function() { 

。 （documentを使用しないのが理想的ですが、'.inventory-item-hold'のすべての要素に最も近い共通の祖先要素が使用されます）