jQuery empty() method makes my <element> un-clickable?

I'm trying to create a tic-tac-toe game using HTML/CSS/Javascript/jquery. I have a reset button that clears the contents of the grid. After pressing the reset button, the grid's contents gets cleared but I cannot click on my grid to pick my spot again. My reset button has the following code:\[code\] $('#reset').click(function(){ $('.cells').empty(); //board_make(); });\[/code\]My grid/board was created using the code below. Basically it creates elements for each cell in the grid with each having a class of "cells".\[code\]function board_make(){ for (var i = 0; i < 3; i ++){ array = new Array(3); for (var j = 0; j < 3; j ++){ array[j] = "A" ; if(j == 2){ $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div></br></br></br>"); } else{ $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>"); } } }}\[/code\]Finally, this is the code that gets executed whenever a cell in the grid is clicked on: \[code\]$('.cells').click(function(){ if ($(this).text() != symbol){ var a = parseInt($(this).text()[0],10); var b = parseInt($(this).text()[1],10); array[a] = symbol; $(this).html("<p class='shown'>"+symbol+"</p>"); } else{ alert("Spot taken. Pick another spot."); } if ((winner_found === false) && (hor_match() || ver_match() || diag_match())){ alert("Match found!"); winner_found = true; } });\[/code\]Here's the link to the work-in-progress along with the codes: http://jsbin.com/inazog/6/edit.
 
Back
Top