表格单元格事件侦听器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格单元格事件侦听器相关的知识,希望对你有一定的参考价值。
我有一段时间坚持这个代码,不知道什么是错的!这个jQuery代码函数用于游戏的单个网页应用程序。我需要通过点击它来更改表格单元格背景颜色,但它不起作用
$("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");
});
});
答案
我认为问题在于,当您将click事件绑定到表格单元格时,尚未创建这些单元格。尝试将click事件绑定到正文并使用"#pixelCanvas tr td"
选择器来过滤事件使用者:而不是$("#pixelCanvas tr td").click
编写以下内容:
$("body").on("click", "#pixelCanvas tr td", function() {
$(this).css("background-color", "blue");
});
另一答案
问题是在完成“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");
});
});
});
以上是关于表格单元格事件侦听器的主要内容,如果未能解决你的问题,请参考以下文章