title: jQuery empty() method makes my <element> un-clickable?
body: <p>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:</p>
  
  <pre><code> $('#reset').click(function(){
     $('.cells').empty();
       //board_make();
   });
  </code></pre>
  
  <p>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".</p>
  
  <pre><code>function board_make(){
    for (var i = 0; i &lt; 3; i ++){
      array[i] = new Array(3);
      for (var j = 0; j &lt; 3; j ++){
        array[i][j] = "A" ;
        if(j == 2){
          $('.board').append("&lt;div class='cells'&gt;&lt;p class='hidden'&gt;"+i.toString()+j.toString()+"&lt;/div&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;");
        }
        else{
        $('.board').append("&lt;div class='cells'&gt;&lt;p class='hidden'&gt;"+i.toString()+j.toString()+"&lt;/div&gt;");
        }
      }
    }
  }
  </code></pre>
  
  <p>Finally, this is the code that gets executed whenever a cell in the grid is clicked on: </p>
  
  <pre><code>$('.cells').click(function(){
      if ($(this).text() != symbol){
        var a = parseInt($(this).text()[0],10);
        var b = parseInt($(this).text()[1],10);
        array[a][b] = symbol;
        $(this).html("&lt;p class='shown'&gt;"+symbol+"&lt;/p&gt;");
      }
      else{
        alert("Spot taken. Pick another spot.");
      }
      if ((winner_found === false) &amp;&amp; (hor_match() || ver_match() || diag_match())){
          alert("Match found!");
          winner_found = true;
      }  
   });
  </code></pre>
  
  <p>Here's the link to the work-in-progress along with the codes: <a href="http://jsbin.com/inazog/6/edit" rel="nofollow">http://jsbin.com/inazog/6/edit</a>.</p>