How to prevent default link behavior if element inside of link is clicked
<p>I have a link that looks like this:</p>

<pre><code>&lt;a href="page.html" class="myLink"&gt;
  Link text
  &lt;div class="toggle"&gt;x&lt;/div&gt;
&lt;/a&gt;
</code></pre>

<p>When they click on the <code>x</code> in toggle I want to prevent the link from navigating, but if they do click on the <code>Link Text</code> I want the link to navigate.</p>

<p>I tried this:</p>

<p><code>$('.toggle').click(function(event) { $(this).parents('a').preventDefault(); });</code></p>

<p>But it didn't seem to work.</p>
