javascript - jquery を使用して HTML テーブルから動的に追加された行を削除する際の問題

Question

ボタンのクリックで新しい行が追加される動的テーブルを作成していました。このテーブルには、 Deleteという列が含まれています。リンクの削除をクリックすると、対応する行が削除されます。しかし、私のjqueryは機能していません。

テーブルからエントリを削除するスニペットは次のとおりです。

$(".delRow").click(function()
                        {
                            alert("Called");
                             $(this).parents('tr').first().remove();


                        }
                    ); 

これがjsfiddle LINKです

更新:動的に追加されていない行を正常に削除できることに注意してください。動的に追加された行のリンク列の削除をクリックしても、アラートは呼び出されません。

Answer 1

.delRowページの読み込み時には が存在しないため、動的に作成された要素にイベント ハンドラをバインドするために使用する必要があります.on。

この形式を使用するにonは、まず jQuery を使用して、イベント ハンドラーをバインドする要素の既存の静的な親を選択します。選択した親は、パフォーマンスを向上させるために、ターゲット要素にできるだけ近づける必要があります。次に、処理するイベントとターゲット要素のセレクターを指定します。最後に、イベント ハンドラーが提供されます。

            /*Remove Text Button*/
            $("#sample-table").on("click", ".delRow", function()
                {
                    $(this).parents("tr").remove();
                }
            ); 

作業例 http://jsfiddle.net/qRUev/2/

ドキュメンテーション

Answer 2

使ってみて

$('.delRow').live('click', function (){
   alert("Called");
});

それ以外の

$(".delRow").click(function(){
   alert("Called");
});

Answer 3

使用する必要があるかもしれません

$(document).on('click', ".delRow", function()
                    {
                        alert("Called");
                         $(this).parents('tr').first().remove();


                    }
                ); 

デモ:フィドル