Javascript HTML表格单元格事件侦听器不'；好像不行？

我正在做一个HTML/Javascript项目来创建一个简单的扫雷游戏。为了创建一个可点击的单元格网格，我采用了我找到的代码。该代码本身可以完美地工作（有关更多详细信息，请参阅）：

var；
var grid=可点击网格（10,10，onClick）；
document.body.appendChild（网格）；
//这是clickableGrid对象构造函数。它接受行和列的数量
//对于网格，以及单击单元格时将执行的回调函数
函数clickableGrid（行、列、回调）{
//“i”是将数字存储在每个单元格中的变量。A 10x10
//例如，网格将看到i的范围从1（左上单元格）到100（右下单元格）
var i=0；
//创建table元素并为其指定一个类名，以便CSS格式化
//可能适用
var grid=document.createElement（'table'）；
grid.className='grid'；
//逐行构建网格
对于（var r=0；r溶液，通过OP

Chris G对这个问题的评论是绝对正确的，他指出网格“从未附加到文档中”。问题是minedGrid函数在底部有
返回网格；
，而它应该在底部执行
返回新网格；
。如果您想看到此代码的修订版本，请

我想再次特别强调Chris G的帮助，以及他版本的minedGrid代码：。
由OP提供的解决方案

Chris G对这个问题的评论是绝对正确的，他指出网格“从未附加到文档中”。问题是minedGrid函数在底部有
返回网格；
，而它应该在底部执行
返回新网格；
。如果您想看到此代码的修订版本，请

我想再次特别强调Chris G对他的帮助，以及他版本的minedGrid代码：。
我不得不停下来对您的代码评论表示赞赏…：）我花了一些时间才找到问题。您正在创建的新网格（使用X和单击处理程序）从未附加到文档中。这里有一个修订版，重点是创建网格：我不得不停下来称赞您的代码注释…：）我花了一些时间才找到问题。您正在创建的新网格（带有X和单击处理程序）从未附加到文档中。这里有一个修订版，重点是创建网格：
var lastClicked;
var grid = clickableGrid(10,10,onClick);

document.body.appendChild(grid);

// This is the clickableGrid object constructor.  It takes in the number of rows and columns
// for the grid, and a callback function that will be executed when a cell is clicked
function clickableGrid( rows, cols, callback ){
    // 'i' is the variable that will store the number in each cell.  A 10x10
    // grid, for example, will see i range from 1 (top left cell) to 100 (bottom right cell)
    var i=0;

    // Create the table element and assign it a class name so that CSS formatting
    // may be applied
    var grid = document.createElement('table');
    grid.className = 'grid';

    // Build the grid row by row
    for (var r=0;r<rows;++r){

        // Create a table row element and append it to the table element ('grid')
        var tr = grid.appendChild(document.createElement('tr'));
        tr.row = r;

        // Build the row cell by cell
        for (var c=0;c<cols;++c){

            // Create the cell element and append it to the row element ('tr')
            var cell = tr.appendChild(document.createElement('td'));

            // Input the number to the cell's innerHTML
            cell.innerHTML = ++i;

            // Add an event listener that will execute the callback function
            // when the cell is clicked, using the cell's element and information
            cell.addEventListener('click',(function(el, r, c, i){
                return function() {
                    callback(el, r, c, i);
                }
            })(cell, r, c, i),false);
        }
    }
    return grid;
}

// This function contains the actions we want to be executed when the click occurs
function onClick(el, row, col, i) {
    // Log to the console the details of the cell that was clicked
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);
    console.log("You clicked on item #:",i);

    // Record in the element that it was clicked
    el.className='clicked';

    // If the element is not the same as 
    if (lastClicked) lastClicked.className='';
    lastClicked = el;
}

function startGame() {
    var gameDifficulty = document.getElementsByTagName("select")[0].value;
    var currGrid = document.querySelector('.grid');
    var newGrid = new minedGrid(gameDifficulty, onClick);
    currGrid.parentNode.replaceChild(newGrid, currGrid);
}

// minedGrid object constructor: creates and returns a fully-mined and
// prepared Minesweeper grid
function minedGrid(difficulty, callback){
    var rows, cols, mines;

    var newGrid = document.createElement('table');
    newGrid.className = 'grid';

    switch (difficulty) {
        case 0:
            rows = 10;
            cols = 10;
            mines = 10;
            break;
        case 1:
            rows = 16;
            cols = 16;
            mines = 40;
            break;
        case 2:
            rows = 16;
            cols = 30;
            mines = 99;
            break;
        default:
            rows = 10;
            cols = 10;
            mines = 10;
            break;
    }

    for (var r = 0; r < rows; ++r) {
        var tr = newGrid.appendChild(document.createElement('tr'));

        for (var c = 0; c < cols; ++c) {
            var cell = tr.appendChild(document.createElement('td'));
            cell.innerHTML = "X";
            cell.addEventListener('click',(function(el, r, c){
                return function() {
                    callback(el, r, c);
                }
            })(cell, r, c),false);
        }
    }
    return grid;
}

// This function contains the actions we want to be executed when the click occurs
function onClick(el, row, col) {
    // Log to the console the details of the cell that was clicked
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);

    // Record in the element that it was clicked
    el.className='clicked';

    // If the element is not the same as 
    if (lastClicked) lastClicked.className='';
    lastClicked = el;
    }