Prevent redirect when clicking on anchors child element

283
November 22, 2016, at 4:22 PM

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).

Answer 1

Try this:

$('#bar').on('click', function(e) { 
    if( $(e.target).is('#button') ) { 
        e.preventDefault(); 
        //your logic for the button comes here 
    } 
    //Everything else within the ancho will cause redirection*** 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="foo" id="bar">OK 
  <span id="button">click me</span> 
</a>

Answer 2

Try:

e.preventDefault();

Fiddle: http://jsfiddle.net/hfyy10a8/3/

Answer 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();
});
Answer 4

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.

Answer 5

Try to use e.preventDefault() instead:

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

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

Rent Charter Buses Company
READ ALSO
Owl Carousel Infinity Loop for Wordpress Plugin

Owl Carousel Infinity Loop for Wordpress Plugin

Looking to use an infinity loop for the latest Owl Carousel Wordpress plugin. I've downloaded Owl Carousel v2, which has the infinity loop implemented, but the functionality and the Javascript are very different from the Wordpress plugin's versions.

452
Open overlay (modal dialog) jquery tools on page load

Open overlay (modal dialog) jquery tools on page load

I was trying to open jquery tools overlay on page load. The default method for this "load()" not work and there is no error message inside the console.

382
HTML5 Preview large images quickly

HTML5 Preview large images quickly

Hi I am making a mobile web application that requires a user to upload multiple images on to the server. Once they select their images, I want to show a thumbnail preview of their images before they choose to upload to the server.

320
Ajax Spinner in modal dialog

Ajax Spinner in modal dialog

I am trying to display the ajax spinner in modal dialog. I have an ajax spinner already in my page in one of the ajax action for which initially I have coded it using the following code.

694