Nested jquery selectors triggering both parent and child specific events
<p>I've got a table with the following structure</p>

<blockquote>
  <ul>
  <li>table#Main</li>
  <li><ul>
  <li>tbody</li>
  </ul></li>
  <li><ul>
  <li><ul>
  <li>tr.Row</li>
  </ul></li>
  </ul></li>
  <li><ul>
  <li><ul>
  <li><ul>
  <li>td </li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li><ul>
  <li><ul>
  <li><ul>
  <li><ul>
  <li>input.EditRow</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
</blockquote>

<p>My jquery looks like this:</p>

<pre><code>        $("table#Main &gt; tbody &gt; tr.Row").live("click", function (e) {
            RowClick($(this));
        });

        $(".EditRow").live("click", function (e) {
            EditRow($(this));
        });
</code></pre>

<p>My problem is that if I click the .EditRow button and call the EditRow function, the RowClick function is called immediately after.</p>

<p>After doing some research on the site, I saw that others got around this problem by using either one of the other of the following commands. </p>

<pre><code>e.preventDefault();
e.stopPropagation();
</code></pre>

<p>I tried them on both functions, in different combinations but couldn't figure it out. Can someone tell me what I'm doing wrong?</p>

<p>Thank you! &lt;3</p>
