jquery - Reset function on game not working -

i've been making simple tile match game using jquery , okay except after game completed doesn't reset correctly after clicking modal box) , can no longer click divs play again.

to see game , code please go http://codepen.io/acnorrisuk/pen/jdogvp/ have console.logged array of values can cheat way through game see happens when resets.

the reset function below:

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 unique tile number , inserts images     (var = 0; < tile_values.length; i++) {         $("#board").append("<div class='flip-container flip'>\                 <div class='tile flipper' id='" + + "'>\                     <div class='front'></div>\                     <div class='back'><img src='" +             tile_values[i] + "'>\                 </div>\             </div>\         </div>");     } }; 

you removing tile elements (the ones "tile" class) when create new board. tile elements had click-handler bound them, newly added tile elements not have click handler bound them.

you move code binds click-handler inside newboard() function (after tile elements added board), better way use event delegation. event delegation can bind click handler #board element, not removed , re-added. handler still called tile elements.

just change this:

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

to this;

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

jsfiddle

note: in jsfiddle commented-out call shuffle tiles easier complete game.