Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Is it preferable to have # in a link's href attribute when I am implementing the click event via jQuery, or is it ok to leave href empty?

i.e.

<a id="myLink" href="#" />

vs

<a id="myLink" href="" />

When I'm doing

$("#myLink").on('click', function() {
   // do ajaxy stuff
});

Although I understand the click event could be on a span or other such element I'm interested in this case for particular best practices when using an a tag.

share|improve this question

3 Answers 3

up vote 10 down vote accepted

Links with an empty href attribute are valid, as explained in RFC2396:

4.2. Same-document References

A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document. Traversal of such a reference should not result in an additional retrieval action. However, if the URI reference occurs in a context that is always intended to result in a new request, as in the case of HTML's FORM element, then an empty URI reference represents the base URI of the current document and should be replaced by that URI when transformed into a request.

It's not really an issue significant enough to be anything more than personal preference. Personally, I'd go with a third option:

<a id="myLink" href="<url>" />

...where <url> is the url of my ajax request. Obviously that introduces a step in jQuery:

$("#myLink").click(function(event) {
    event.preventDefault();
   url = $(this).attr("href");

   // do ajaxy stuff
});

...but I find it a bit more convenient than hardcoding the url in Javascript, it makes sense semantically (checking your code couple of years after you wrote it, the url will be were you'll first look for it - probably). It's also a neat trick if you have a few simplistic ajax-y links that do more or less the same thing. Consider this example:

<a class="ajax" href="<url1>">
<a class="ajax" href="<url2>">
<a class="ajax" href="<url3>">

$("a.ajax").click(function(event) {
    event.preventDefault();
    var url = $(this).attr("href");

    $.get(url, function(data) {
        console.log(data);
    });
});
share|improve this answer
    
interesting I never thought to add the url and then get it via ajax –  dreza Nov 29 '12 at 1:15
    
@dreza One thing to keep in mind is that you must call event.preventDefault() prior to doing anything else, or else the browser will execute the link normally. See: api.jquery.com/event.preventDefault –  Yannis Rizos Nov 29 '12 at 1:28
    
Thanks I had just realised that after trying your suggestion. Works well –  dreza Nov 29 '12 at 1:40
    
+1 @dreza This solution also allows you to degrade gracefully if the user has JavaScript disabled. For ex. in your server-side code, you can check if the X-Requested-With header is set to XMLHttpRequest. If not, you can redirect to a page instead of doing the "ajaxy" stuff. –  lortabac Dec 1 '12 at 10:06

Yannis' answer is a good one, but I still don't know why anyone would need to use <a href...> tags for events at all. You can use pretty much any tag you can throw an id into for events, thereby removing the whole 'href="" is legal' discussion or employing code to prevent the link being followed.

On the other hand, if it's a link then use <a href="...">

share|improve this answer
1  
Cheers Ian. Yes in this case I was interested in best practices around using a tags as it's intention is to be a link –  dreza Nov 30 '12 at 19:09

I don't think it'll make a huge difference most of the time. If there's no real link, you might also consider using a span instead of an a tag.

I've seen something like this as well:

<a id="myLink" href="javascript:void(0)" />

See this page for examples: http://weblogs.asp.net/joelvarty/archive/2008/09/30/javascript-in-lt-a-gt-tags-vs-javascript-void-0.aspx

Additionally, it would be a good idea to run the html through a validator to check for any potential problems.

share|improve this answer
    
Cheers. Most of the times it is a link but I guess good to consider for those when it's not a direct url linkage –  dreza Nov 29 '12 at 1:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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