動的に追加された要素に対してjQueryイベントが正しく機能しない

Question

ここで見つけたjQueryスクリプトを使用して、テーブルの行をハイライト表示/非表示にしています。スクリプトは次のとおりです。

$(".clickable-row").click(function(){ 
if($(this).hasClass('row-highlight')) 
    $(this).removeClass('row-highlight'); 
else 
    $(this).addClass('row-highlight').siblings().removeClass('row-highlight'); 

}

私のテーブルのすべての行は、クラスのクリック可能な行を持っています。

これは、ユーザーがボタンをクリックしたときに動的に行が追加されたテーブルを導入するまで、うまくいきました。その表では、動的に追加された行は強調表示されません。

私は任意の手段によってjQueryの専門家ではないが、いくつかの研究の後、私はイベントの委任を使用することにより、動的に追加された行がクリック可能であるべきことがわかったので、私はこれに私のスクリプトを変更：

$(".clickable-row").on("click", "td", function() { 

if ($(this).parent().hasClass('row-highlight')) { 
    $(this).parent().removeClass('row-highlight'); 
} else { 
    $(this).parent().siblings().removeClass('row-highlight'); 
    $(this).parent().addClass('row-highlight'); 

} 

}）;

これは静的テーブルでは問題なく動作しますが、動的に追加された行では機能しません。

私は動的に追加された行のHTMLをチェックしていると、彼らは次のようになります。

<tr class="clickable-row"> 
<td>some text here</td> 
<td class="hidden"><input type="text" name ="ID2" value="2"></td> 

HTML構造が同じテーブル内の既存の行と全く同じです。行はタグ内に含まれます。

どこが間違っていますか？

編集：何らかの理由で、コードブロックが正しく表示されません。 htmlの例の最後に "/ tr"タグがありますが、質問には表示されません。

Answer 1

特に大規模なテーブルの上に非効率的であるすべての行にハンドラを結合する.clickable-rowに取り付けます。テーブルにバインドする方が良いでしょう。

$('table').on('click', 'tr td', function(e) { 
    alert('click') 
}); 

これは新しいセルをクリックします。個々のセルの代わりにクリックしたい行全体の場合は、ちょうどtrを使用してください。

はここに例を示しますhttp://jsfiddle.net/es8rLhpt/2/

Answer 2

それはあなただけのバインド解除および再バインドする必要があります.click（）イベントで動作することができます。

あなたが追加された新しい細胞のためにもう一度あなたのテーブルのセルに「クリック」イベントをバインドする必要があるコードを実行します。

はまた再びイベントリスナーをバインドする前にイベントリスナーをバインド解除することを確認してください。

この場合

$(".clickable-row").unbind("click"); 

次いで

$(".clickable-row").click(function(){ 
    if($(this).hasClass('row-highlight')) 
     $(this).removeClass('row-highlight'); 
    else 
     $(this).addClass('row-highlight').siblings().removeClass('row-highlight'); 
}