创建数独网格（Javascript 和 HTML），不允许输入单元格答案

【问题标题】：Creating a Sudoku Grid (Javascript and HTML), won't allow input to cells创建数独网格（Javascript 和 HTML），不允许输入单元格
【发布时间】：2017-12-05 06:12:56
【问题描述】：

所以我已经运行了我的程序，它创建了一个数独网格，并在其下方有一个单行表格，以允许输入数字。

但是，当我单击底部的数字并单击单元格以便数字可以进入单元格时，它将不起作用。（我双击，表明我点击了它）

我选择了 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 + '">&nbsp;</td>';
        }
        htmlText += '</tr>';
    }
    $('#sudokuTable').html(htmlText);
}
var inputNumber = 1;
function clicked() {
    cellId = this.id;
    if ($('#' + cellId).text() == inputNumber) {
        $('#' + cellId).text('&nbsp;');
    } else {
        $('#' + cellId).text(inputNumber);
    }
}



function selectNumber() {
    inputNumber = this.innerText;
    $('.numberSelector').removeClass('selectedNumber');
    $(this).addClass('selectedNumber');
}

$('.sudokuCell').on('click', clicked);
$('.numberSelector').on('click', selectNumber);

顺便说一句，我用过 Zepto :)

任何帮助将不胜感激 :) 谢谢！

【问题讨论】：

标签： javascript html css sudoku zepto

【解决方案1】：

问题出在这一行：

$('.sudokuCell').on('click', clicked);

您将处理程序附加到页面加载时不存在的.sudokuCell 元素的click 事件。您必须将事件委派处理到事件附加时存在的最近的父级。

要解决这个问题，请在您的代码中进行以下简单更改：

$('#sudokuTable').on('click','.sudokuCell', clicked);

在这里查看完整的功能代码：JSBIN

在此处了解有关事件委托的更多信息：Understanding Event Delegation

【讨论】：