Jquery click handler not working in a table
<p>I am using a Jquery plugin called Jquery Content Panel Switcher.  It does exactly what the title says, it switches out divs with ease.  The html for the page is: </p>

<pre><code>&lt;!--The switcher buttons, basic anchor tags, with the switcher class --&gt;
&lt;a id="content1" class="switcher"&gt;One&lt;/a&gt;
&lt;a id="content2" class="switcher"&gt;Two&lt;/a&gt;

&lt;!-- The panel you wish to use to display the content --&gt;
&lt;div id="switcher-panel"&gt;&lt;/div&gt;

&lt;!-- The actual content you want to switch in and out of the panel, this is hidden --&gt;
&lt;div id="content1-content" class="switcher-content show"&gt;&lt;/div&gt;
&lt;div id="content2-content" class="switcher-content show"&gt;&lt;/div&gt;
</code></pre>

<p>In each of my content panels I have a form.  In each form there is a table:</p>

<pre><code>&lt;table class="table table-hover" data-controller="rank"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th colspan="4" align="left"&gt;&lt;h2&gt;Rank 1&lt;/h2&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Number&lt;/th&gt;
      &lt;th&gt;Requirements&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr data-name="one_li"&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;Info&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr data-name="two_li"&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;More Info&lt;/td&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I am trying to fire off an action if a row gets clicked.  Here is the javascript I am using:</p>

<pre><code>$(document).ready(function(){
  $('#switcher-panel form table tbody tr').click(function(){
     console.log("Clicked");
   });
});
</code></pre>

<p>When I use the Jquery selector of <code>$('#switcher-panel form table tbody tr')</code> in my Chrome console, it finds the table and everything looks fine.  When I put it in my javascript file, nothing happens.  Some direction would be great.  Thanks for the help.  </p>
