jqueryによって新しく作成された表のセルを取得できません

Question

jqueryを使用してhtml表を作成し、その表のセルにclickイベントを追加するという問題が発生します。それは完全に正常に動作していますが、そのテーブルに新しいテーブルの行を追加すると、新しく作成された行のclickイベントがキャッチされません。イヤラー行はうまく動作しています。

私はあなたの助けが高く評価される私のコードを送っています。

<% @ページ言語= "C＃の" AutoEventWireup属性= "true" をCodeFile = "Default.aspx.cs" 継承= "_デフォルトの" ％>

<style type="text/css"> 
    .cpHeader 
    { 
     color: white; 
     background-color: #719DDB; 
     font: bold 11px auto "Trebuchet MS", Verdana; 
     font-size: 12px; 
     cursor: pointer; 
     width:450px; 
     height:18px; 
     padding: 4px;   
    } 
    .cpBody 
    { 
     background-color: #DCE4F9; 
     font: normal 11px auto Verdana, Arial; 
     border: 1px gray;    
     width:450px; 
     padding: 4px; 
     padding-top: 7px; 

    } 
    .imageClass 
    { 
     background-image:url(Images/expand.png); 

    } 
    .tableCell 
    { 
     padding: 5px; 
    } 
    .buttonCSS 
    { 
     width:50px; 
     height:50px; 
     background-color:Green; 


    }  
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     createTable($("#tbl"), 5, 5); 

     $(".tableCell").click(function() { 
      alert("Column # = " + $(this).data("col") + "\n Row # = " + $(this).data("row")); 

     }); 

     function createTable(tbody, rows, column) { 
      if (tbody == null || tbody.length < 1) { 
       return; 
      } 
      for (var i = 0; i < rows; i++) { 
       var trow = $("<tr>"); 
       trow.data("trow", i); 
       for (var j = 0; j < column; j++) { 
        var celltext = "" + i + "." + j; 
        $("<td>") 
         .addClass("tableCell") 
         .text(celltext) 
         .data("col", j + 1) 
         .data("row", i + 1) 
         .appendTo(trow); 
       } 
       trow.appendTo(tbody); 
      } 
      $(tbody).data("rows", rows); 
      $(tbody).data("cols", column); 

     } 

     $("#addRowBtn").click(function() { 
      var table = $("#tbl"); 
      var trow = $("<tr>"); 
      var columns = table.data("cols"); 
      for (var i = 0; i < columns; i++) { 
       var td = $("<td>") 
       td.addClass("tableCell"); 
       td.data("col", i + 1) 
       td.data("row", table.data("rows") + 1) 
       td.text("" + (table.data("rows") + 1) + "." + (i + 1)) 
       td.appendTo(trow); 
      } 
      trow.appendTo(table); 
      table.data("rows", table.data("rows") + 1); 
     }); 

    }); 

</script> 

Answer 1

ここでイベントハンドラをバインドするには、delegate関数を使用する必要があります。

$('#tbl').delegate('.tableCell', 'click', function(){ 
    alert("Column # = " + $(this).data("col") + "\n Row # = " + $(this).data("row")); 
}); 

これは.tableCell要素がdelegateが呼び出された時に存在していない場合でも、#tblの子である.tableCellの上のすべてのクリックをキャッチします。

は、ここでは、このライブを実証する簡単なデモです：http://www.jsfiddle.net/yijiang/hBkKh/