Modifying the onclick event with jQuery

Question

I've got a javascript snippet that displays a widget on my page. There's some links that get output by the script that look like this:

<a href="#" onclick="somefunction()">Link</a>

These links cause some JS to fire. That's great. The problem is the href="#" and the absence of a "return false;" at the end of the onclick attribute.

When I click one of those links, the browser jumps to the top of the document. With the widget positioned close to the bottom of the document, this is no good.

Unfortunately, I have no control over the output of the script.

Using jQuery I can reference these links using $("#wxheader ul li a"). I tried the following code but it doesn't work:

$(document).ready(function(){
    $("#wxheader ul li a").each(function(){
        var onclick = $(this).attr("onclick") + "; return false;";
        $(this).attr("onclick", onclick );
    });
});

I want to write a jQuery function that will change each onclick attribute to append "return false;" and it has to run after the script has output the content to the page.

Any ideas?

James · Accepted Answer · 2010-12-07 20:21:06Z

4

Try this. The trick is to call preventDefault in the handler, which prevents the default element action from propagating. I hope this helps.

$("#wxheader ul li a").click(function(e){
  e.preventDefault();
  return false;
});

edited Dec 7, 2010 at 20:21

answered Dec 7, 2010 at 20:14

James

12.8k12 gold badges70 silver badges105 bronze badges

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

3 Comments

WNRosenberg Over a year ago

no idea about those downvotes. Methinks your competitors don't want you to get credit. Yours was the quickest response that did what I needed it to do.

Jeremy B. Over a year ago

There was quite a downvote flurry here. This is a good concise answer.

James Over a year ago

Appreciate that, I used my vote power to get everyone else out of negative too. It's too bad we can't figure out who did that...

bevacqua · Accepted Answer · 2010-12-07 20:15:01Z

2

Have you tried using href="javascript:"?

answered Dec 7, 2010 at 20:15

bevacqua

48.8k56 gold badges176 silver badges287 bronze badges

Comments

Peter Bailey · Accepted Answer · 2010-12-07 20:19:44Z

2

I'd do it like this

$( '#wxheader ul li a' ).each( function( i, element )
{
  // Capture the existing callback function
  var originalCallback = element.onclick;

  // Now, remove it from the elemnet
  element.onclick = null;

  // And replace it with our own, which calls the orignal
  // with the proper context, and prevents the default
  // event action
  $(element).click( function( event )
  {
    event.preventDefault();
    originalCallback.call( window );
  });
});

answered Dec 7, 2010 at 20:19

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

1 Comment

Peter Bailey Over a year ago

It appears so, yes. Slightly different approaches but otherwise the same gist. Why do you ask?

Jeremy B. · Accepted Answer · 2010-12-07 20:26:32Z

2

You should be able to override it in jquery, try this:

$("#wxheader ul li a").each(function(){
    $(this).click(function(e) {
        e.preventDefault();
    });
});

This stops the normal process of the click event.

Fixed, this will effectively stop the browser's default interpretation of the click event

edited Dec 7, 2010 at 20:26

answered Dec 7, 2010 at 20:14

Jeremy B.

9,2323 gold badges48 silver badges57 bronze badges

2 Comments

Jacob Relkin Over a year ago

This is wrong, each traverses the jQuery set, it does not bind a click event.

Jeremy B. Over a year ago

You are right, i copied his code too quickly, editing to fix it.

Jonathan Leffler · Accepted Answer · 2011-07-09 05:34:40Z

2

You could also use:

<a href="javascript:void(0)" onclick="somefunction()">Link</a>

edited Jul 9, 2011 at 5:34

Jonathan Leffler

760k145 gold badges961 silver badges1.3k bronze badges

answered Dec 7, 2010 at 20:15

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

3 Comments

WNRosenberg Over a year ago

I would still need a jQuery function to change the href of the links from "#" to "javscript:void(0)" since I have no control over the output of the script.

Dutchie432 Over a year ago

Are you down-voting every non-correct answer? That seems a little absurd. See if I help you next time.

James Over a year ago

I don't think he did it, it had to have been someone else if you look at the math.

BenMorel · Accepted Answer · 2013-12-10 11:09:46Z

2

Look in to the preventDefault object in jQuery.

http://api.jquery.com/event.preventDefault/

That will allow it to not run initially or also adding the return false in the jQuery click handler. preventDefault might not work in Firefox. I'm not entirely sure.

$("#wxheader ul li a").click(function(){ 
   //do stuff//
    return false;
});

This is a test page i made with some ajax functionality on a link for someone trying to override the regular click. this is the functionality I'm talking about it if its what you are looking for.

http://testing.kobbyappiah.com/Design_and_Evolve/ajaxTest.html

edited Dec 10, 2013 at 11:09

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Dec 7, 2010 at 20:21

Kobby

5904 silver badges13 bronze badges

Collectives™ on Stack Overflow

Modifying the onclick event with jQuery

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related