title: jquery event listener for detect clicks dynamically?
body: <p>I have 2(or more) tables with different ids and class names within each tables are same. Depending on which span is clicked I want to show or hide rows within tbody. for eg: if the span class="quarter" is clicked, I want to show the row with class="quarter" within tbody and hide the class="month". Should I use jQuery event listeners to achieve this? I want this code to be resuable to many other tables with id=tab3 or tab4 and possibly many more. So I do not want to use $("#tab1").onclick...I want to be able to detect which span within which table was clicked and then show the tbody elements within it.</p>
  
  <pre><code>&lt;table id="tab1"&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;span class="quarter"&gt;Quarter&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;&lt;span class="month"&gt;Month&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr class="quarter"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="month"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table id="tab2"&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;span class="quarter"&gt;Quarter&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;&lt;span class="month"&gt;Month&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>
      
      
      
      
      </p>
  
  <p>Final Solution(my actual html structure is little different from the example above)</p>
  
  <pre><code>$('table thead span label').click(function() {  
                          $("label:not(this.className)").css('color','#d6c9b9');      
                          $(this).css('color','#00425f');         
                          $(this).parents('table').parents('table').find('table').hide();                     
                          $(this).closest('table').find('tbody tr').hide();
                          $(this).closest('table').show();                        
                          $(this).closest('table').find('tbody tr.' + this.className).show();
                          $(this).parents('table').parents('table').find('table.'+ this.className).show();
              });
  </code></pre>