Question

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

我发送给您的代码，我们将非常感谢您的帮助。

＆lt;％@ Page Language =“C＃”AutoEventWireup =“true”CodeFile =“Default.aspx.cs”Inherits =“_ Default”％＆gt;

 <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时#tbl元素不存在，这也会记录.tableCell的{{1}}个孩子的所有点击次数。

以下是一个演示此内容的简单演示：http://www.jsfiddle.net/yijiang/hBkKh/

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

1 个答案: