表格单元格事件监听器

Question

我被这段代码卡住了一段时间，不知道哪里出了问题！这个jQuery函数是为一个游戏的单页面应用程序而编写的。我需要通过点击来改变表格单元格的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");
    });
});

- Ahmed Elbessfy

Answer 1

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

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

- Kirill Simonov

---

我也有这个想法，但我不太确定。你的解决方案对我非常有效。非常感谢你的帮助，伙计。 - Ahmed Elbessfy

另外一件事：我认为你在编辑我的代码时漏掉了一些东西。最后的) };是准备函数的结束，所以需要它而不是错误的一个。再次感谢。 - Ahmed Elbessfy

@Ahmed，我很高兴能帮忙！如果我在编辑时漏掉了什么，请原谅。但是我只是缩进了一下，没有删除任何括号。最后的 }); 现在关闭了 ready 函数。 - Kirill Simonov

我也是。不用担心更改。但是我并不完全明白当我点击单元格时发生了什么，所以如果您能告诉我搜索和阅读哪个主题，以了解发生了什么？ - Ahmed Elbessfy

@Ahmed，请查看jQuery文档，特别是委托事件部分：_委托事件的优点在于它们可以处理后来添加到文档中的后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，您可以使用委托事件来避免频繁地附加和删除事件处理程序_。 - Kirill Simonov

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

- Codegenic

---

我觉得这里有一个误解。在我的代码中，我已经在点击事件函数之前关闭了makeGrid函数，因此我不需要等待提交按钮被点击。感谢你的帮助。 - Ahmed Elbessfy

直到makeGrid运行，项目才会在DOM中创建，并且它只有在单击$('input[type="submit"]')后才会运行。没有元素在DOM中，所以$("#pixelCanvas tr td").click(...)代码在元素创建之前运行，因此找不到任何东西，这就是为什么单元格的点击未被捕获的原因。我提供的代码在每次单击$('input[type="submit"]')时创建（附加）单元格后连接了单击事件。同时，您选择的答案也可以正常工作。只是个人喜好问题。 - Codegenic

我完全同意你的观点，但在原始代码中，makeGrid函数在click函数之前关闭。 - Ahmed Elbessfy