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

Question

我遇到了一个问题，我正在使用 jquery 创建一个 html 表格并将点击事件添加到它的表格单元格中。它工作得很好，但是当我在该表中添加一个新的表行时，它不会捕获新创建的行上的点击事件。前面几行工作正常。

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

 <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"));
});

这将捕获所有对.tableCells 的点击，这些点击是#tbl 的子元素，即使在调用delegate 时.tableCell 元素不存在。

这是一个简单的现场演示：http://www.jsfiddle.net/yijiang/hBkKh/