title: jquery onclick event not working on td
body: <p>I am trying to trigger an event when I click on a <code>td</code> with class <code>toggle</code>. When I click on a td with class <code>toggle</code>, I want to show all the next <code>tr</code> with class <code>hidethis</code>. </p>
  
  <p>But I cant seem to trigger an event on the <code>td</code>. Here's what I have got so far.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
  $(' td .toggle ').on('click',function(ev){
  
  
  $(this).closest('tr').nextAll('tr .hidethis').show();
  
  
  });
  
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;table border="1"&gt;
  &lt;tr &gt;
  &lt;td class="toggle"&gt;First Toggle&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "hidethis" style="display:none"&gt;
  &lt;td&gt;Value 1&lt;/td&gt;
  &lt;td&gt;Value 2 &lt;/td&gt;
  &lt;td&gt;Value 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr &gt;
  &lt;td class="toggle"&gt;Second Toggle&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class = "hidethis" style="display:none"&gt;
  &lt;td&gt;Value 4&lt;/td&gt;
  &lt;td&gt;Value 5 &lt;/td&gt;
  &lt;td&gt;Value 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is  when I click on the <code>td</code> with class <code>toggle</code> the event is not firing.
  Please help me. May be I am not seeing something obvious.
  Thanks in advance. </p>