Yeni oluşturulmuş tablo hücresi jquery

Question

aracılığıyla alınamıyor Bir jtery kullanarak bir html tablosu oluşturduğum ve tablo hücrelerine tıklama olayı eklediğim bir sorundan geçiyorum. mükemmel çalışıyor ama bu tabloya yeni bir tablo satırı eklediğimde, yeni oluşturulan satırdaki tıklama olayını yakalamayacak. Earler satırları iyi çalışıyor.

Kodumu gönderdim, yardımınız çok takdir edilecek.

<% @ Page Language = "C#" AutoEventWireup = "true" CodeFile = "default.aspx.cs" devralır = "_ Varsayılan" %>

<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

Olay işleyicilerinizi buraya bağlamak için delegate işlevini kullanıyor olmalısınız.

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

Bu .tableCell elemanları delegate denir anda var olmasa bile, #tbl çocuklarıdır .tableCell s üzerindeki tüm tıklamaları yakalayacak.

İşte bu canlı gösteren basit bir demo: http://www.jsfiddle.net/yijiang/hBkKh/