JQueryレスポンスクリック機能

Question

Chrome拡張機能を構築しています。私は単純なhtmlファイル（div、イメージ、空のテーブルを含む）を持っています。次に、データベースから読み込んだテーブルの行とデータをエコーし​​て、それが動作してからいくつかの詳細を取り除きました。私はエコーedテーブルの行とデータを取得し、前述のhtmlファイルのテーブルにそれらを追加するajax要求を送信します。

これは、私は、テーブルにテーブルの内容の添付を処理し、また、任意のテーブルを処理することになっているjqueryのスクリプトを持って

//a few of these: 
echo 
"<tr> 
<td> Something </td>   
<td> Something </td> 
<td> Something </td> 
</tr>"; 

「何か」でデータを交換する、PHPファイルがどのように見えるかです行のクリックそのAjaxリクエストを送信し、テーブルのデータを追加します。これは、あなたが、私はそれがない行をクリックした場合にのみ、まだ警告、およびことを、私はすべてのTRのクリック機能を持っているページの一番下に見ることができるようにそのスクリプトファイルが

$(document).ready(function() { 

        $.urlParam = function(name){ 
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
        if (results==null){ 
         return null; 
        } 
        else{ 
         return results[1] || 0; 
        } 
       } 

       $usern = $.urlParam('user'); 
       var div = document.getElementById('welcome'); 
       div.innerHTML = "Pozdravljeni, <a href='https://www.google.si' id='imeUser'><span>" + $usern + "</span></a>! <a href='dodajGeslo.html'><span id='dodajGeslo'> Dodaj Geslo </span></a>"; 
       $.ajax({ 
        url: 'http://passvault.000webhostapp.com/qryGesla.php', 
        data: {user:$usern}, 
        type: "GET", 
        success: function(data) { 
         $("#gesla").append(data); 
         $("#load").css("display", "none"); 
        } 
       }); 

       $('tr').click(function() { 
        alert('test'); 
       }); 

}); 

次のようになります作業。誰かが私を助けることができますか、私は何が間違っているのか分かりません

Answer 1

委任されたイベントを使用します。クリックハンドラは、ページがロードされたときに存在した<tr>でのみ有効になります。イベントハンドラを追加するコードは、テーブルを作成する前に実行されます（これは、ajax経由で実行されているように見えます）。

ページが読み込まれたときに既に存在する要素にイベントを設定する必要がありますが、イベントが発生したときに存在する子要素（選択した要素）にイベントを委任するように指示する必要があります。私は "gesla"要素がこの必要性を満たしていると仮定します。データを追加するためですが、そうでない場合はDOMの上位にある別の親要素を選択します（他に何も適用されない場合はdocumentパフォーマンスのためには、最も近い使用可能な親を選択する必要があります）。

$("#gesla").on("click", "tr", function() { 
    alert("test"); 
}); 

詳細情報についてはこちらをご覧ください：http://api.jquery.com/on/（「ダイレクトと委任イベント」と題されたセクション）。