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?

Answer 1

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