无法通过jquery获取新创建的表格单元格

Question

我正在经历一个问题，我正在使用jQuery创建一个html表格并将click事件添加到其表格单元格中。它工作得很好，但是当我在表中添加一个新的表格行时，它不会捕获新创建的行上的点击事件。耳机行工作正常。

我发送你我的代码你的帮助将受到高度赞赏。

<％@页面语言= “C＃” AutoEventWireup = “真” 的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 S中的的#tbl孩子的所有点击，即使在其delegate被调用的时候不存在.tableCell元素。

这里有一个简单的演示展示了这个活：http://www.jsfiddle.net/yijiang/hBkKh/