13

I have an anchor like this

<a href='#' onclick='return showform(this)'>click me</a>

But I want to be able to override the onclick function, how to do this in jquery?

because it seems when I add

$('a').click( function() { alert('hi there!'); } );

the new click handler is not overriding the old one

2
  • why <a href='#' onclick='return showform(this)'>click me</a>? structure/content and behavior should be separate. en.wikipedia.org/wiki/Unobtrusive_JavaScript
    – Wondering
    Dec 18, 2009 at 13:29
  • I have removed the onclick function and rely everything on jquery because it seems more flexible that way... Thank you all for the responses :) Dec 25, 2009 at 4:35

4 Answers 4

22

In your case the onCick event is overriding the jQuery one. What you might be able to do is:

$('a').unbind('click').click(function(){
    alert('why hello there children.');
})

But I believe this would have to be included after the

<a href='#' onclick='return showform(this)'>click me</a>

That said, you should really not be using onClicks anyway... it makes the code really hard to maintain and change (as you have found out).

7
  • If you're following Yahoo, all scripts are included at the end of the page anyway...
    – Skilldrick
    Dec 18, 2009 at 12:14
  • That is true, I figured I should point that part out though, as the last onclick event should override the rest no?
    – SeanJA
    Dec 18, 2009 at 12:15
  • It depends when $('a').unbind() is called. If it's in $(document).ready() then it could be in the head and still work.
    – Skilldrick
    Dec 18, 2009 at 12:16
  • I am not 100% certain, but I think that unbind can't remove a handler that hasn't been set up with jQuery. Dec 18, 2009 at 12:17
  • 1
    @SSH This: Whoops. Fixed it (surprised no one else saw that...)
    – SeanJA
    Apr 18, 2013 at 1:44
18

Have you tried something like this:

$("a").removeAttr("onclick");
2
  • Old post, but this is definitely the method that has been working for me within the ready() function Feb 19, 2012 at 13:50
  • Worked perfectly for me too! Oct 27, 2016 at 8:40
10

If you're using jQuery like this, you don't want any handlers in the HTML. Can't you just remove the onClick attribute?

If you're worried about breaking stuff, search and replace on:

 onclick='return showform(this)'

and replace with

class='showform'

Then you can do:

$('a.showform').click(function (e) {
    e.preventDefault();
    return showform(this);
});

which will keep your existing handlers working.

0

There is a plugin for it, but you should only do this when you really need to. The plugin allows you to call the original function or ignore/replace it entirely

jQuery Override Plugin

$(divElementObj).override('onclick', 'click', function(...));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.