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: ``` Link ``` 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 th…

Accepted Answer

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;
});
```

Modifying the onclick event with jQuery

Solution

Problem