title: Event handler cannot watch for elements injected into HTML after document loads
body: <p>I'm writing an application in Javascript. Without going into too much detail, I have a game with a board (which is actually just an HTML table). The user interacts with the board by clicking on s, so I have a click event listener in my $(document).ready(). The event handler updates the board by changing the state of several variables/objects/etc and then calling layoutBoard, which reads the state of all those objects and populates the .</p>
  
  <p>The problem I'm having is that the s in the new  aren't being watched by my event handler, meaning click events are no longer detected. How can I direct the event handler to the new s or otherwise continue to detect clicks on the board? Here's my code:</p>
  
  <pre><code>$(document).ready(function(){
      layoutBoard();
      $("td").click(
          function() {
              movePiece($(this));
          }
      );
  });
  
  function movePiece(clickedCell){
      //do stuff
      layoutBoard();
  }
  
  function layoutBoard(){
      $("#board").empty();
      //recreate board and new &lt;td&gt;s
  }
  </code></pre>