jQuery preventDefault() stops onclick from working

Question

I have a problem with jQuery preventDefault from running the onclick function of an tag. Here is my example: Avoid page jump on # click

$("#main a").bind("click", function (e) { 
    e.preventDefault();
});

I thought preventDefault would stop the default event (href="#"). But that it would let the "onclick" event stil fire. If I put the function inside my function it works. But I want to have different onclick functions on the links.

This isn't 1999, get rid of the inline event handlers, problem solved! — adeneo
– adeneo, Commented Feb 24, 2015 at 11:04
adeneo is right, you bind two clicks to a single element. One using inline javascript onclick="..." and the other with jQuery $("#main a").bind("click"..., just remove the inline one. — Jeremy Thille
– Jeremy Thille, Commented Feb 24, 2015 at 11:07
You can bind the click using jquery or plain js. (same @adeneo and @Jeremy). To check some particular behavior (depending the link that the users are coming from) after the event, I would do it inside the function that the event is handled. — newpatriks
– newpatriks, Commented Feb 24, 2015 at 11:13
@downvoter: The question may have been newbish, but it was in no way a bad question. He followed the "How to ask" rules and the question itself was posed correctly. It did not deserve a downvote imo. — Praxis Ashelin
– Praxis Ashelin, Commented Feb 24, 2015 at 11:35
Thanks everyone! This was some code I was cleaning up on (not mine). I would not myself write an inline onclick today after all I know about jQuery :-) But now I understand there were 2 click bindings on the element. I really was wondering because I got this to work on an <area> tag with an "onclick" function. They wanted me to add the preventDefault to avoid the page jumping on clicks. It was strange that it worked there. Here there is an "onclick" function on the <area> and I added a bind function to the area also. Seems to work here: uu-k1.no/kart_v2015 — asle
– asle, Commented Feb 24, 2015 at 12:43

Praxis Ashelin · Accepted Answer · 2015-02-24 11:28:12Z

As adeneo and Jeremy have mentioned, do not use inline event handlers. They will interfer with your jQuery event handler.

Simply merge the 2 functions into one, and it will work:

$("#main a").bind("click", function (e) { 
    e.preventDefault();

    var p = $(this).position();
    $("#loader").css("top", p.top - 20);
    $("#loader").toggle();
});

JSFiddle

If I put the function inside my function it works. But I want to have different onclick functions on the links.

If you want to have different onclick functions on different links, then use classes (or IDs) and select them appropriately with jQuery.

HTML:

<div id="main">
    <p><a class="doSomething" href="#">I will NOT JUMP!</a></p>
    <p><a class="doSomethingElse" href="#">I will NOT JUMP</a></p>
</div>

jQuery:

$("#main a.doSomething").bind("click", function (e) { 
    e.preventDefault();

    var p = $(this).position();
    $("#loader").css("top", p.top - 20);
    $("#loader").toggle();
});

$("#main a.doSomethingElse").bind("click", function (e) { 
    e.preventDefault();

    //Other code
});

JSFiddle demo

Collectives™ on Stack Overflow

jQuery preventDefault() stops onclick from working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related