title: jQuery Click Event on TD elements without triggering on the Nested Table TD elements
body: <p>I have a table where the rows are dynamically removed and added via jQuery. There are supposed to be click event handlers on the <code>td &gt; ul</code> elements and there is the possibility of a sub-table within a <code>td</code> element. My problem is that I can not figure out how to establish a listener on the parent table's <code>td &gt; ul</code> elements without triggering a click on the nested table's <code>td &gt; ul</code> elements. I have tried the following statements using <code>jQuery.on()</code>.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table class="click-me"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;ul&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ul&gt;
              &lt;/td&gt;
              &lt;td&gt;dummy td
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>td { border: 1px solid; margin: 20px; padding: 20px; }
  
  .new { background-color: yellow; }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("table.click-me &gt; tbody").on("click", "tr:first-child &gt; td &gt; ul &gt; li", function()
  {
      $(this).closest("tr").after("&lt;tr class=\"new\"&gt;&lt;td&gt;&lt;ul&gt;&lt;li&gt;click (new)&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;&lt;td&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;ul&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;&lt;td&gt;dummy td&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;")
  });
  
  $("table.click-me").on("click", "tbody &gt; tr &gt; td &gt; ul &gt; li", function()
  {
      $(this).closest("tr").after("&lt;tr class=\"new\"&gt;&lt;td&gt;&lt;ul&gt;&lt;li&gt;click (new)&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;&lt;td&gt;&lt;table class=\"\"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;ul&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;&lt;td&gt;dummy td&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;")
  }); //works on ALL children elements, even the sub-table. Not the desired results
  </code></pre>
  
  <p>As always, any help is much appreciated!</p>