タグを動的に追加すると返されるオブジェクトがないのはなぜですか？

Question

選択した「tr」タグはクリックイベントによって動的に追加されますが、別のクリックイベントでは何も戻せません。動的に追加された「tr」の上にある元の静的な「tr」タグはすべて、同じクリックイベントによって正常に返されます。

私は本当にそれを理解することはできません、ここで助けを求める。

おかげ

//eventhandler to get current this<tr> object 
$('tr').click(function() { 
        console.log(this) 
} 
//original static <tr>, works fine 
<tr> 
        <td>Meet friends for dinner</td> 
        <td><time datetime="2013-10-14">2013-10-14</time></td> 
        <td>Personal</td> 
        <td> 
         <nav> 
          <a href="#">Edit</a> 
          <a href="#">Complete</a> 
          <a href="#">Delete</a> 
         </nav> 
        </td> 
</tr> 
//how I add <tr> dynamically 
<script id="taskRow" type="text/x-jQuery-tmpl"> 
<tr> 
    <td>${task}</td> 
    <td><time datetime="${requiredBy}">${requiredBy}</time></td> 
    <td>${category}</td> 
    <td> 
     <nav> 
      <a href='#'>Edit</a> 
      <a href='#'>Complete</a> 
      <a href='#' class='deleteRow'>Delete</a> 

     </nav> 
    </td> 
</tr> 
</script> 

Answer 1

イベントハンドラはのみ、現在選択された要素にバインドされています。コードが.click（）を呼び出すときにページに存在する必要があります。

したがって、コードが生成される前に、次のコードでtrが存在する必要があります。

$('tr').click(function() { 
    console.log(this); 
} 

新しいHTMLがページに挿入されている場合は、次に説明するように、委任されたイベントを使用してイベントハンドラを添付することをお勧めします。

委任されたイベントは、後でドキュメントに追加される子孫要素のイベントを処理できるという利点があります。

$("table").on("click", "tr", function(event){ 
    console.log(this); 
}); 

詳細については、fiddleを参照してください。

注：委任・イベント・アプローチ（第2のコード例では）唯一の要素、tableにイベントハンドラをアタッチし、そしてイベントのみ（クリックtrからtableに）あるレベルまでバブルする必要があります。