on.clickが動的に作成されたテーブルを最初にクリックした後に動作しない

Question

「アクター」のリンクでいっぱいのテーブルを動的に作成します。アクター情報をフォームにプルして行を削除または更新できます。削除ボタンは、アクタを選択するとポップアップします。

私は行をクリックし、フォームに情報をプルして、最初に試してみることができます。しかし、新しい「Actor」を追加して削除するか、既存の2行目を削除すると、「Delete Actor」ボタンが機能しません。最初の成功した削除がボタンがもう機能しなくなった後です。

var addActor = function() { 
    // Creates a table of links for each added actor with an id based from # of actors 
    $("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> "); 

    $(".update").off("click"); 
    $(".update").on("click", selectActor); 
}; 


var deleteActor = function(e) { 
    $("#deleteActor").on('click', function(event) { 
     event.preventDefault(); 
     var row = e.parentNode.parentNode; 
     row.parentNode.removeChild(row); 
     clearForm(actorForm); 
     actorState("new"); 
    }); 
}; 

私はjQueryの/ JavaScriptに新たなんだ、と私は、DOMの変化に起因するそのかなり確信しているが、私はちょうどそれを動作させるために変更するのか分かりません。アクション

Answer 1

するvar deleteActor =関数（E）{

$("#deleteActor").unbind(); 
$("#deleteActor").on('click', function(event) { 
    event.preventDefault(); 
    var row = e.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
    clearForm(actorForm); 
    actorState("new"); 
}); 

}をしてみてください。

ここにバインド解除のリンクがあります。 http://api.jquery.com/unbind/

Answer 2

におけるそれの

Here is an Exampleあなたはonclick属性から実行クリックハンドラ関数内（jQueryのでは）別のクリックハンドラを追加しているため、問題があります。どちらか一方の方法を使用するか、両方を使用しないでください。最も簡単な方法で問題を解決するだけdeleteActor()関数からjQueryのコードを削除する：

var deleteActor = function(e) { 
    var row = e.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
    clearForm(actorForm); 
    actorState("new"); 
}; 

Answer 3

あなたがHTMLを追加するときに動的にあなたがそうのように親の静的な要素にイベントをアタッチする必要があります。その埋めることになって、私はテーブルにをクリックすると、これと

$("#actorsTable").on("click","a.update", function() { 
    $(this).closest("tr").remove(); 
});