Unbind jQuery click event from the element

Question

All the elements with .btn class are bound to a jQuery click event on page load. Is there a way to unbind a single element that uses the class .btn. I tried by adding return false in the onclick event to an anchor tag like this

<a href="index.html" class="btn" onclick="return false;" target="_blank">Link</a>

but it doesn't seem to override or prevent it from performing the click event bound by jQuery

EDIT
Thanks for all the answers, but is there an inline solution to this? Something like onclick="event.preventDefault();"

Also follow up question: Just curious, which among onclick and jQuery event listener gets called first?

while you can change onclick event why you not just delete the href or change to href="#" — Mohamed-Yousef
– Mohamed-Yousef, Commented Dec 15, 2015 at 6:12

Shailesh Katarmal · Accepted Answer · 2015-12-15 06:16:47Z

3

Use unbind() method of Jquery.

<a href="index.html" onclick="return false;" target="_blank" id="xyz">Link</a>      

$(document).ready(function(){
     $("#xyz").unbind("click");
});

answered Dec 15, 2015 at 6:16

Shailesh Katarmal

2,7931 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

guradio Over a year ago

a little explanation wouldnt hurt

KAD · Accepted Answer · 2015-12-15 06:15:53Z

1

You can use jquery .not to narrow the selection with a specific button where you need to give this button a unique id:

<a href="index.html" class="btn" id="prevent" target="_blank">Link</a>
<a href="index.html" class="btn"  target="_blank">Link</a>

$(".btn").not("#prevent").click(function(){

});

answered Dec 15, 2015 at 6:15

KAD

11.2k4 gold badges34 silver badges75 bronze badges

1 Comment

JohnnyQ Over a year ago

I already did this but I'm looking for an inline solution. This was my last resort. Thanks!

Arnaud Gueras · Accepted Answer · 2015-12-15 07:04:01Z

0

If you added event click via delegation like this :

$(document).on('click', '.btn', function(e){});

You must stop event propagation from your own .btn

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

How do you add event click on your .btn ? If you add event by click, you can off it

$('.myOwnBtn').off('click');

Onclick attribute is executed before click event from jquery and is completely independent from click event from jquery.

edited Dec 15, 2015 at 7:04

answered Dec 15, 2015 at 6:22

Arnaud Gueras

2,06215 silver badges14 bronze badges

2 Comments

JohnnyQ Over a year ago

Thanks! So does that mean whatever you put in onclick gets overridden by jQuery? Also which does get called first? onclick or the jQuery click event?

Arnaud Gueras Over a year ago

Attribute onclick is executed first but it is independent from event handler system.

Collectives™ on Stack Overflow

Unbind jQuery click event from the element

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related