title: jQuery .click function not working on < td > tag?
body: <p>So I am creating a table using Javascript and jQuery, and I want it so that when you click the td's on the first row of the table, then the rest of the td's in that column drop down. Let me try to explain it by showing my code. Here is my Javascript: </p>
  
  <pre><code>function createTr (heights) { //heights is just an array of words
      for (var h=0; h&lt;heights.length; h++) { 
          var theTr = $("&lt;tr&gt;", { id: "rowNumber" + h});
          for (var i=0; i&lt;heights.length-3; i++) { 
              theTr.append($("&lt;td&gt;", { "class": "row"+h + " column"+i,
                                       html: heights[h][i]
                                     }));
          }
          $('#newTable').append(theTr); // append &lt;tr id='rowNumber0'&gt; to the table (#newTable), which is written in the html
      }
  }
  </code></pre>
  
  <p>This basically creates td's and each td is similar to this format</p>
  
  <pre><code>&lt;td class="rowh columni"&gt;
  </code></pre>
  
  <p>I want it so that all td's are hidden except for the td's in .row0 and if you click the td in .row0 .columni, then all td's in .columni appear. The parameter 'heights' is jsut an array, for example, it can be</p>
  
  <pre><code>var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];
  </code></pre>
  
  <p>and it would create a table using those words, headerOne and headerTwo would be in the first row, someTd and anotherTd would be in the second row.</p>
  
  <p>Now, when I try to add a click function like so</p>
  
  <pre><code>function animation() {
      $('td').click( function() {
          alert('clicked');
      });
  }
  </code></pre>
  
  <p>and then call it in my document.ready function like so </p>
  
  <pre><code>$(document).ready( function() {
  
      createTr(heights);
      animation();
  });
  </code></pre>
  
  <p>it doesn't do anything when I click a td. How come?</p>