title: How to add jQuery .on click to Tablesorter th?
body: <p>I have <code>table.tablesorter</code> element that change frequently using <strong>AJAX</strong>. I want to add event handler on 'click' that will delegate to <code>table.tablesorter th.class</code> element whenever I click its header. I'm new in use jQuery on. So, I try to put following jQuery script into Chrome Web Console.</p>
  
  <p>jQuery script:</p>
  
  <pre><code>$('#table-content').on(
      'click', 
      '.tablesorter thead tr th', 
      function() {alert(); }
  );
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="table-content"&gt;
      &lt;table class="tablesorter"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="header"&gt;No.&lt;/th&gt;
                  &lt;th class="header"&gt;Name&lt;/th&gt;
                  &lt;th class="header"&gt;Phone&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result: there is no alert pop up window when I click header on the table.</p>
  
  <p>What must I change to show alert dialog when I click the table's header?</p>