Table 单元格事件侦听器

Question

我有一段时间坚持这段代码，不知道哪里出了问题！此 jQuery 代码函数适用于游戏的单个网页应用程序。我需要通过单击更改 table 单元格 background-color，但它不起作用：

$("document").ready(function() {
    var y, x, cellColor;
    //console.log("tata");

    $("#sizePicker").submit(function(event) {
        event.preventDefault();
    });

    $('input[type="submit"]').click(function makeGrid(y, x) {
        y = Number($("#inputHeight").val());
        x = Number($("#inputWeight").val());
        $("#pixelCanvas tr").remove();
        for (i = 0; i < y; i++) {
            $("#pixelCanvas").append("<tr class='vertical'></tr>");
        }
        for (j = 0; j < x; j++) {
            $(".vertical").append("<td class='cell' ></td>");
        }
        $("#pixelCanvas tr td").css("background-color", "red");
    });

    $("#pixelCanvas tr td").click(function() {
        $(this).css("background-color", "blue");
    });
});

Answer 1

我认为问题在于当您将点击事件绑定到 table 单元格时，这些单元格尚未创建。尝试将点击事件绑定到主体并使用 "#pixelCanvas tr td" 选择器来过滤事件消费者：而不是 $("#pixelCanvas tr td").click 编写以下内容：

$("body").on("click", "#pixelCanvas tr td", function() {
    $(this).css("background-color", "blue");
});

Answer 2

问题是在单击 'input[type="submit"]' 之前元素尚未创建。将单元格单击的绑定移动到 'input[type="submit"]':

的单击处理程序中

$("document").ready(function() {
    var y, x, cellColor;
    //console.log("tata");

    $("#sizePicker").submit(function(event) {
        event.preventDefault();
    });

    $('input[type="submit"]').click(function makeGrid(y, x) {
        y = Number($("#inputHeight").val());
        x = Number($("#inputWeight").val());
        $("#pixelCanvas tr").remove();
        for (i = 0; i < y; i++) {
            $("#pixelCanvas").append("<tr class='vertical'></tr>");
        }
        for (j = 0; j < x; j++) {
            $(".vertical").append("<td class='cell' ></td>");
        }
        $("#pixelCanvas tr td").css("background-color", "red");

        $("#pixelCanvas tr td").click(function() {
           $(this).css("background-color", "blue");
        });
    });
});

Table 单元格事件侦听器

Table cell event listener

javascript

jquery

jquery-events