Javascript 事件处理程序没有响应

我正在制作一个简单的记忆游戏，我几乎完成了所有的事情。然而，我希望能够对按钮设置不同的困难，但是在单击按钮时调用我的函数生成表会使其余代码无效。这是我的密码。有人能告诉我为什么点击其中一个按钮，“容易、中等、难”会使表格单元格无法被读取

//Creates all of the variables to be manipulated later
var countCells;
var cardValues = [];
var checker = true;
var tempArr = [];
var winCounter = 0;


//Generates a table with the dimensions specified
var createTable = function (row, col) {
    $('table').empty();
    for (var i = 1; i <= row; i++) {
        $('table').append($('<tr>'));
    }
    for (var j = 1; j <= col; j++) {
        $('tr').append($('<td>'));
    }
    countCells = row * col;
};
createTable(3, 6);

//Creates a new game with various difficulties
$('#easy').click(function () {
    createTable(2, 5);
});
$('#medium').click(function () {
    createTable(3, 6);
});
$('#hard').click(function () {
    createTable(4, 9);
});

//Adds a number for half of the cells into an array twice
for (var k = 1; k <= countCells / 2; k++) {
    cardValues.push(k);
    if (k === countCells / 2 && checker) {
        checker = false;
        k = 0;
    }
}

//Adds a random number from the array to each of the cells
var giveCellValue = function () {
    var len = cardValues.length;
    for (var i = 0; i <= len; i++) {
        var random = Math.ceil(Math.random() * cardValues.length) - 1;
        $('td').eq(i).append(cardValues[random]);
        cardValues.splice(random, 1);
    }
};
giveCellValue();

//Checks for matches when cells are clicked
$('td').click(function () {
    if ($(this).hasClass('clicked') || $(this).hasClass('completed')) {
        $(this).stopPropagation();
        $(this).preventDefault();
        return;
    }
    $(this).addClass('clicked');
    tempArr.push($(this).text());
    var len = tempArr.length;
    if (len > 1) {
        if (tempArr[0] === tempArr[1]) {
            alert("Good job!");
            $('.clicked').addClass('completed');
            $('.completed').removeClass('clicked');
            winCounter = winCounter + 1;
        } else {
            alert("Try again!");
            $('.clicked').removeClass('clicked');
        }
        tempArr.splice(0, 2);
    }
    if (winCounter === countCells / 2) {
        alert('You won!');
    }
    console.log(countCells, winCounter);
});

//创建以后要操作的所有变量
var计数细胞；
var cardValues=[]；
var checker=true；
var tempArr=[]；
var winCounter=0；
//生成具有指定维度的表
var createTable=函数（行、列）{
$（'table'）.empty（）；
对于（var i=1；i，因为您正在清除附加了click事件的td。请尝试以下更改：

-$('td').click(function () {
+$('td').live('click', function () {

清除表时，
td
的事件处理程序将丢失。您需要使用委派/活动或重置单击

我花了一些时间修复了你的代码这里是一个工作小提琴。

值得注意的变化

stopPropagation
和
preventDefault
不在您正在单击的td“this”上，它们位于传递给您的委托/单击函数的事件对象上

我重构了按钮单击监听器来调用函数来重置内容

$('#hard').click(function () {
    createTable(4, 9);
    addNumbers();
    giveCellValue();
});

我创建了
addNumbers
函数，您必须将这些数字加回去

已更改
$（'td'）。单击
以

//Checks for matches when cells are clicked
$('table').on('click', 'td', function (event) {

如果在调用dom后向其添加了某些内容，则不需要设置will。
您对$（'table'）.empty（）的调用将销毁表单元格和关联的事件处理程序。您需要为td重新绑定单击处理程序，或者更好地使用事件委派，如：

$('table').on('click', 'td', function() {
    //your code here

}))
 从1循环到“countCells”
的
，不应该在“createTable（）”函数中吗？否则它只运行一次，我想是jQuery不知道动态创建的元素。您正在td存在之前注册单击事件。您可以尝试使用jQuery“on”方法$（“td”）。单击（“click”，function（）{}）；如果您可以发布HTML或更好的JSFIDLE，那么就更容易帮助调试了。我不知道createTable是在哪里定义的，但是我怀疑它是破坏性的，因为它完全替换了表，包括表和/或其子体上绑定的所有事件。因此，我建议将tds的click事件处理程序移动到createTable方法中，或随后由createTable方法调用的方法中。@KevinB createTable是具有两个for循环的函数。我已经尝试在这个函数中添加按钮处理程序，但是没有成功。这产生了意想不到的结果。这是我正在使用的完整代码，如果你想搞乱它的话。有太多的事情要数。我只想通过你的代码而不是我的代码来亲自查看。所有的问题仍然存在于你上一次的小提琴上。现在，一些卡在单击时显示为空白，并在一定程度上使游戏无法玩。这也没有任何作用。
live
不推荐使用。改为使用（）上的
。。使用委托语法