所以我已经运行了我的程序，它创建了一个数独网格，并在其下方有一个单行表格，以允许输入数字。
但是，当我单击底部的一个数字并单击一个单元格以便该数字可以进入单元格时，它不起作用。 (我双击，表示我点击了)
我选择了 1，然后单击一个单元格，希望 1 出现在该单元格中。但相反，它什么都不做。
这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Generated Sudoku">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="http://zeptojs.com/zepto.min.js"></script>
<title>Sudoku Generator</title>
</head>
<body>
<h1>Sudoku</h1>
<table id="sudokuTable">
</table>
<table>
<tr>
<td class="numberSelector">1</td>
<td class="numberSelector">2</td>
<td class="numberSelector">3</td>
<td class="numberSelector">4</td>
<td class="numberSelector">5</td>
<td class="numberSelector">6</td>
<td class="numberSelector">7</td>
<td class="numberSelector">8</td>
<td class="numberSelector">9</td>
</tr>
</table>
<button type="button" onclick="createSudokuTable()">New</button>
</body>
</html>
这是我的 CSS:
td {
border:1px solid black;
width:20px;
height:20px;
text-align:center;
cursor:pointer;
}
.numberSelector {
background-color:blue;
color:yellow;
font-family:Arial,Sans-Serif;
}
.selectedNumber {
background-color:yellow;
color:blue;
}
这是我的 JavaScript:
function createSudokuTable() {
var htmlText = '';
for (var row = 1; row <= 9; row++) {
htmlText += '<tr>';
for (var column = 1; column <= 9; column++) {
htmlText += '<td class="sudokuCell" id="cell_' + row + '_' + column + '"> </td>';
}
htmlText += '</tr>';
}
$('#sudokuTable').html(htmlText);
}
var inputNumber = 1;
function clicked() {
cellId = this.id;
if ($('#' + cellId).text() == inputNumber) {
$('#' + cellId).text(' ');
} else {
$('#' + cellId).text(inputNumber);
}
}
function selectNumber() {
inputNumber = this.innerText;
$('.numberSelector').removeClass('selectedNumber');
$(this).addClass('selectedNumber');
}
$('.sudokuCell').on('click', clicked);
$('.numberSelector').on('click', selectNumber);
我顺便用过 Zepto :)
如有任何帮助，我们将不胜感激 :) 谢谢!
最佳答案
问题出在这一行:
$('.sudokuCell').on('click', clicked);
您在 .sudokuCell 元素的 click 事件上附加处理程序，该事件在页面加载时不存在。您必须将事件处理委派给在事件附加时存在的最近父级。
要解决这个问题，请在您的代码中进行以下简单更改:
$('#sudokuTable').on('click','.sudokuCell', clicked);
在这里查看完整的功能代码:JSBIN
在此处了解有关事件委托(delegate)的更多信息:Understanding Event Delegation
关于javascript - 创建数独网格(Javascript 和 HTML)，将不允许输入单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44860778/