表格单元格事件侦听器

时间:2018-03-01 23:12:30

标签: javascript jquery javascript-events

我有一段时间坚持使用此代码并且不知道错误是什么! 这个jQuery代码函数用于游戏的单个网页应用程序。 我需要通过点击它来更改表格单元格背景颜色,但它不起作用

wsl.exe

2 个答案:

答案 0 :(得分:2)

我认为问题在于,当您将click事件绑定到表格单元格时,尚未创建这些单元格。尝试将click事件绑定到正文并使用"#pixelCanvas tr td"选择器过滤事件使用者:而不是$("#pixelCanvas tr td").click编写以下内容:

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

答案 1 :(得分:0)

问题是,在点击输入[type =" submit"]'之前,尚未创建元素。已经完成了。将单元格点击的绑定移动到'输入的点击处理程序[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");
        });
    });
});