どのようにイベントを追加するテーブルの動的trをクリックしてください

Question

私はhtmlテーブルを持っており、実行時にテーブルの行に追加します。私は新しいTR（ダイナミックTR）に追加する は、私はこのコードを書いたが、それは

$（ "＃のGridView1のTBODYのTR"）を動作していないClickEventを追加します。（関数（E）]をクリックし、{

   var id = $(this).find(".lbl").text(); 
       workOrderId = id; 
       // $("#gridtbl tr").remove(); 
       $.ajax({ 
        url: "PublicHandler.ashx", 
        contentType: "application/json; charset=utf-8", 
        data: { workOrderId: id }, 
        success: function (data) { 
         var grd = $("#gridtbl"); 
         $.each(data, function (i, b) { 
          var str = "<tr>"; 
          str += "<td style='display: none;'>" + b.WorkId + "</td>"; 
          str += "<td>" + b.WorkName + "</td>"; 
          str += "<td>" + b.SectionName + "</td>"; 
          str += "<td>" + b.SectionSupervisor + "</td>"; 
          if (b.RequestCount == null) { 
           str += "<td>" + " " + "</td>"; 
          } else { 
           str += "<td>" + b.RequestCount + "</td>"; 
          } 

          str += "<td>" + " " + "</td>"; 

          str += "</tr>"; 
          $(str).click(function() { 
           alert("hiiiiiiiiiii"); 

          }).end().appendTo("#gridtbl tr"); 
          // grd.append(str); 

         }); 
        }, 
        dataType: "json" 

       }); 
       popup(e); 
      }); 

Answer 1

あなたはdelegate

$("#GridView1 tbody").delegate("tr", "click", function(e) { 
    //rest of the code here 
}); 

を使用することができるか、最近、jQueryの1.7で、あなたは使用することができますon

$("#GridView1 tbody").on("click", "tr", function(e){ 
    //rest of the code here 
}); 

---

live方法は使用しないように、その優れたへdeprecatedですが、私はそのまま

$("#GridView1 tbody tr").live("click",function (e) { 

Answer 2

代わり$("#GridView1 tbody tr").live("click" ,function (e)

Answer 3

次を使用する例を残しておきます@Mattのコメントで述べたようにあなたが追加するすべてのtrにクリックイベントをバインドしないで、デリゲート関数を調べることをお勧めします。

デリゲートhereについて詳しくは、こちらをご覧ください。

また、人々はライブを提案するかもしれませんが、私はそれをお勧めしません。あなたの例では常にテーブル内（ユニークなIDを持っている）にバインドしたいので、ライブにバインドされているボディを聴くのではなく、テーブルにバインド（デリゲート）することができます。

Answer 4

ダイナミックテーブルを追加した場合は、次のコードを使用して行クリックで行データを取得できます。 注： 'tr'ではなく、テーブル行のクラス名またはID名を使用できます。

$("body").on('click', 'tr', function() 
    { 
      var Name = $(this).find('td:first').text(); 
      alert(Name); 
    }); 

Answer 5

このようにすることもできます。

$.each(data, function (i, b) { 
    $tr = $('<tr />', { 
     id : <tr_id>, 
     on : { 
      click : function (e) { 
       // here goes the click event logic 
      } 
     } 
    }).appendTo("#gridtbl"); 
});