CODEWITHSUNDEEP
javascriptjqueryeventsclickjquery-events
smartcaveman
smartcaveman

Reputation: 42246

How to stop default link click behavior with jQuery

I have a link on a web page. When a user clicks it, a widget on the page should update. However, I am doing something, because the default functionality (navigating to a different page) occurs before the event fires.

This is what the link looks like:

<a href="store/cart/" class="update-cart">Update Cart</a>

This is what the jQuery looks like:

$('.update-cart').click(function(e) { 
  e.stopPropagation(); 
  updateCartWidget(); 
});

What is the problem?

Upvotes: 100

Views: 159637

Answers (6)

Andy Brown
Andy Brown

Reputation: 5522

I've just wasted an hour on this. I tried everything - it turned out (and I can hardly believe this) that giving my cancel button and element id of cancel meant that any attempt to prevent event propagation would fail! I guess an HTML page must treat this as someone pressing ESC?

Upvotes: 0

Matoeil
Matoeil

Reputation: 7289

This code strip all event listeners

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

Upvotes: 1

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

e.preventDefault();

from https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Cancels the event if it is cancelable, without stopping further propagation of the event.

Upvotes: 148

Null Pointer
Null Pointer

Reputation: 9289

You can use e.preventDefault(); instead of e.stopPropagation();

Upvotes: 4

Peeter
Peeter

Reputation: 9382

$('.update-cart').click(function(e) {
    updateCartWidget();
    e.stopPropagation();
    e.preventDefault();
});

$('.update-cart').click(function() {
    updateCartWidget();
    return false;
});

The following methods achieve the exact same thing.

Upvotes: 38

Jonathon Bolster
Jonathon Bolster

Reputation: 15961

You want e.preventDefault() to prevent the default functionality from occurring.

Or have return false from your method.

preventDefault prevents the default functionality and stopPropagation prevents the event from bubbling up to container elements.

Upvotes: 31

Related Questions