title: Prevent redirect when clicking on anchors child element
body: <p>I have a button that's located in an anchor, and that button has some logic that's triggerd by <code>clicking</code> on it.</p>
  
  <p>The problem is that whenever I click on that button, the app get's redirected due the <code>anchor</code> parent element.</p>
  
  <pre><code>&lt;a href="foo" id="bar"&gt;
    &lt;span id="button"&gt;click me&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I tried using <a href="https://api.jquery.com/event.stoppropagation/" rel="nofollow noreferrer">.stopPropagation()</a> like it's mentioned in <a href="https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli">this post</a>, however it doesn't work.</p>
  
  <p>I tried:</p>
  
  <pre><code>$('#button').on('click', function(e) {
      e.stopPropagation();
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hfyy10a8/2/" rel="nofollow noreferrer">Here's the fiddle</a>.</p>
  
  <p>However, if I replace the parent <code>anchor</code> with a <code>div</code>, then it works - <a href="http://jsfiddle.net/m1dgd9m1/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Am I doing something wrong?</p>
  
  <p><strong>Update</strong>: I know I can prevent redirecting with <code>e.preventDefault()</code>, however, I want when I click on the parent element to redirect, and when I click on the button <strong>not</strong> to redirect and start doing my JS functions (open modal).</p>