Jquery 游戏复位功能不工作

我一直在使用Jquery制作一个简单的平铺匹配游戏，除了游戏完成后（单击模式框后无法正确重置）以及您不能再单击div来再次玩之外，一切都正常

要查看游戏和代码，请转到 我已经将console.log记录了一组值，这样你就可以在游戏中作弊，看看重置后会发生什么

复位功能如下：

function newBoard() {
    // reset variables
    tiles_flipped = 0;
    temp_values.length = 0;
    tile_values.shuffle();
    tile1 = '';
    tile2 = '';
    $("#board").empty();
    $(".tile").removeClass("transform");
    $("#score").html("<p>Pairs Found: " + 0 + "</p>");
    // gives each div a unique tile number and inserts images
    for (var i = 0; i < tile_values.length; i++) {
        $("#board").append("<div class='flip-container flip'>\
                <div class='tile flipper' id='" + i + "'>\
                    <div class='front'></div>\
                    <div class='back'><img src='" +
            tile_values[i] + "'>\
                </div>\
            </div>\
        </div>");
    }
};

函数newBoard（）{
//重置变量
瓷砖翻转=0；
温度值。长度=0；
tile_值。shuffle（）；
tile1=''；
tile2=''；
$（“#board”）.empty（）；
$（“.tile”）.removeClass（“转换”）；
$（“#分数”）.html（“找到对：”+0+“
”）；
//为每个div提供唯一的平铺编号并插入图像
对于（变量i=0；i

创建新板时，您正在删除所有平铺元素（具有“平铺”类的元素）。这些平铺元素绑定了单击处理程序，但新添加的平铺元素没有绑定单击处理程序

您可以移动绑定单击处理程序的代码，使其位于

newBoard（）

函数中（在将平铺元素添加到板中之后），但更好的方法是使用事件委派。通过事件委派，您可以将单击处理程序绑定到

#board

元素，该元素不会被删除和重新添加。但是处理程序仍然会被调用以获取tile元素

只要改变这个：

$(".tile").on("click", function () {

对此,

$("#board").on("click", '.tile', function () {

---

注意：在JSFIDLE中，我注释掉了洗牌的调用，以便更容易完成游戏。

由于您在

新板

函数中将

.tile

添加到

#板

，您需要：

---

我能够让它工作，请参阅

问题是您只在第一组卡片上添加了onClick函数。重置电路板时，您移除了所有旧卡，添加了新卡，但从未再次设置点击功能。它不再是onClick事件中的匿名函数，而是在每次调用reset时添加相应的on-click函数

function newBoard() {
    ...

    $(".tile").on("click", onClick);
}



function onClick() {
    ...
}

使用

$（document）.on（“单击“，”.tile”，函数（）{…}）

非常感谢您的回复。
该问题现已通过以下方式解决：

$（“#board”）。在（“单击”，“平铺”，函数（）{
：）

function newBoard() {
    ...

    $(".tile").on("click", onClick);
}



function onClick() {
    ...
}