jquery – 重置游戏功能不起作用

我一直在使用 Jquery做一个简单的瓷砖比赛游戏,一切都没问题,除非游戏完成后点击模态框没有正确重置)你不能再点击div再玩.

要查看游戏和代码,请转到http://codepen.io/acnorrisuk/pen/JdoGvP/
我有控制台.记录了值数组,这样你就可以在游戏中欺骗自己,看看重置时会发生什么.

重置功能如下：

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>");
    }
};

在创建新电路板时,您将删除所有tile元素(具有“tile”类的元素).那些tile元素将click-handler绑定到它们,但新添加的tile元素没有绑定到它们的click处理程序.

您可以移动绑定点击处理程序的代码,使其位于newBoard()函数内(将tile元素添加到板后),但更好的方法是使用事件委派.使用事件委派,您可以将单击处理程序绑定到#board元素,该元素不会被删除并重新添加.但仍然会为tile元素调用处理程序.

只需改变这个：

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

对此;

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

jsfiddle

注意：在jsfiddle中我注释了调用瓦片以便更容易完成游戏.