I have a button that's located in an anchor, and that button has some logic that's triggerd by clicking on it.

The problem is that whenever I click on that button, the app get's redirected due the anchor parent element.

<a href="foo" id="bar">
  <span id="button">click me</span>
</a>

I tried using .stopPropagation() like it's mentioned in this post, however it doesn't work.

I tried:

$('#button').on('click', function(e) {
    e.stopPropagation();
})

Here's the fiddle.

However, if I replace the parent anchor with a div, then it works - JSFiddle

Am I doing something wrong?

Update: I know I can prevent redirecting with e.preventDefault(), however, I want when I click on the parent element to redirect, and when I click on the button not to redirect and start doing my JS functions (open modal).

I have a button that's located in an anchor, and that button has some logic that's triggerd by clicking on it.

The problem is that whenever I click on that button, the app get's redirected due the anchor parent element.

<a href="foo" id="bar">
  <span id="button">click me</span>
</a>

I tried using .stopPropagation() like it's mentioned in this post, however it doesn't work.

I tried:

$('#button').on('click', function(e) {
    e.stopPropagation();
})

Here's the fiddle.

However, if I replace the parent anchor with a div, then it works - JSFiddle

Am I doing something wrong?

Update: I know I can prevent redirecting with e.preventDefault(), however, I want when I click on the parent element to redirect, and when I click on the button not to redirect and start doing my JS functions (open modal).

• javascript
• jquery

• Use e.preventDefault() – hampusohlsson Commented Oct 21, 2015 at 14:54
• 2 This is a duplicate of so many questions, use the search. – Etheryte Commented Oct 21, 2015 at 14:55
• @Nit yes, I seached a lot but I didn't found a solution when the parent is an anchor element. – Vucko Commented Oct 21, 2015 at 14:57
• What is the purpose of differentiating between clicking on the span vs clicking on the anchor tag wrapped around it? – AtheistP3ace Commented Oct 21, 2015 at 14:59
• 1 It seems that the button click should trigger anchor href redirection. If you want the button to have different action then move it outside the anchor. – MaxZoom Commented Oct 21, 2015 at 15:00

6 Answers 6

Try this:

$('#bar').on('click', function(e) {
    if( $(e.target).is('#button') ) {
        e.preventDefault();
        //your logic for the button es here
    }
    //Everything else within the ancho will cause redirection***
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="foo" id="bar">OK
  <span id="button">click me</span>
</a>

Try:

e.preventDefault();

Fiddle: http://jsfiddle/hfyy10a8/3/

You should use e.preventDefault(); on links:

$('#bar').on('click', function(e) {
    e.preventDefault();
});

You can also add it on your example, all together:

$('#button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
});

use return false:

$('#button').on('click', function (e) {

    //some logic
    $(this).css('color', 'red');

    return false;
});

The reason why stopPropagation wont work is because it will prevent event handlers from running, not native behavior.

Try to use e.preventDefault() instead:

$('#button').on('click', function (e) {
    e.preventDefault();
});

See this explanation for why e.stopPropagation() is not working.

I know this question already has an answer but however, I made mine work by returning false on the "onclick" attribute of the child element.

<a href="https://google.">
    <button onclick="return doTask()">Do not navigate</button>
</a>

function doTask(){
  //... write action

  return false; <- This prevents the click action from bubbling up to parent tag
}