Alternative to when the anchor tag only triggers a jQuery action without redirecting the user?

Question

I have numerous anchor tags on my page that only trigger jQuery actions on the same page.

The don\'t redirect the user to another location, which is the normal expected

Answer 1

# is fine. But the callbacks that are triggered should then return false.

   // assigning a click callback to all anchors
   $('a').click(function(evt){
       //... do stuff
       return false; // avoid jump to '#'
   })

Answer 2

Can you reference a fragment on the page that could work as a logical fallback to the non-executed JavaScript action? If so, it makes a lot of sense to reference <a href="#account"> and have an id="account" on the page that could work as a fallback.

Another option is to reference the dynamically loaded content directly; that way you can quite conveniently use the href in the Ajax call instead of hard-coding what to request in JavaScript somehow; <a href="/path/to/dynamic/content">.

Lastly, you can not have the <a href="#"> statically in the HTML at all, but instead create it on the fly with jQuery since it's only used by jQuery anyway. No need to pollute the markup with placeholders for JavaScript if the placeholders are only used by and for JavaScript anyway.

Regarding "sending the user to the top of the page"; you should just return false from your the function you have hooked up as a click() handler;

$('a').click(function() {
    // Do your stuff.
    // The below line prevents the 'href' on the anchor to be followed.
    return false;
});

Answer 3

You should really be using a <button> element for JS-only actions. They have a default action (if inside a form) but outside of a form they’re purely for user triggered actions that you bind your JS event handler to.

Answer 4

I prefer to use:

<a href="javascript:">foo</a>

unless it is actually an ajax call to load a partial template in which case I use something like this:

<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a>

By returning false in the onclick event, you make sure the site is not reloaded, but it can still be used for opening the url in a new page.

Answer 5

Have you tried omitting the href parameter?

<a>Link title</a>

That should work just fine and not provoke the browser to load a webpage or change the pages position. In fact it won't do anything unless you have some JavaScript to support it.

The href parameter is optional so why include it if you aren't using it?

Answer 6

If the anchor is useless to people who don't have javascript, then they shouldn't see it at all.

The best alternative is to generate these links using jQuery on page load - that way the only people who see them are those who will use them.

In this case, having href="#" is fine, because as long as your event handler finishes with return false; then the href will never be followed