从元素取消绑定jQuery click事件

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?

Answer 1

Use unbind() method of Jquery.

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

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

Answer 2

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(){

});

Answer 3

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.