title: jQuery click event is not working on table
body: <p>I'm having a table in my react application. I'm trying to implement click event like this:</p>
  
  <pre><code>$('#detailedTable tbody').on('click', 'tr', function() {
      //var row = $(this).parent()
      if ($(this).next('tr').hasClass('row-details')) {
          $(this).next().toggle();
          return;
      }
  })
  </code></pre>
  
  <p>I placed this inside componentDidMount method. </p>
  
  <p>This is my table:</p>
  
  <pre><code>&lt;table className="table table-hover table-condensed table-detailed"
  id="detailedTable" ref={node =&gt; this.table_el = node}&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th className="sorting_disabled wd-5p"&gt;&lt;/th&gt;
              &lt;th &gt;Title&lt;/th&gt;
              &lt;th className="wd-15p"&gt;Channel&lt;/th&gt;
              &lt;th className="wd-10p"&gt;File Type&lt;/th&gt;
              &lt;th className="wd-15p"&gt;Uploaded&lt;/th&gt;
              &lt;th className="wd-20p"&gt;Process&lt;/th&gt;
              &lt;th className="wd-10p"&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      { this.state.MediaFiles.map((item, i) =&gt; (
      &lt;tbody&gt;
          &lt;tr onClick={this.rowClick} id={i}&gt;
              &lt;td className="v-align-middle"&gt;
                  &lt;div className="checkbox"&gt;
                  &lt;input type="checkbox" value="3" id={"checkbox1" + i}/&gt;
                  &lt;label htmlFor={"
  </code></pre>
  
  <p>But the click event is not getting fired. What is wrong? </p>