Take the 2-minute tour ×

JQuery + HTML + CSS

I am trying to get the links on a nav bar to update a "div" tag that I have. I got that to work, but I have to click each hyperlink twice before it loads the page on the main viewer. Why? How do I make it load after only one click?


function onScreen(id){
    $("a#" + id).click(function(){$("div#viewer").load(id + '.html')});  


<a href="#" id="about" onclick="onScreen('about')">About Us</a>
<a href="#" id="account" onclick="onScreen('account')">My Account</a>


<div class ="article" id="viewer">
    <p>welcome to this awesome site! </div>

There is an "about.html" file (and all other necessary files) in the same folder. Again, the code functions, just not as it is supposed to.

share|improve this question

6 Answers 6

up vote 5 down vote accepted

The first click execute onScreen, which associate the load function to the click event. The load function is thus triggered the second time you click.


A solution could be to remove the onclick attributes on your <a href=#> tags

    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
share|improve this answer
Yes - this explains the problem quite precisely. What about a solution though? :) –  Lix Jul 26 '12 at 22:09
True, I had only answered the first part of the question, edited –  Julien Ch. Jul 26 '12 at 22:17
Thanks! I'll give it a shot today! –  Jeff Jul 27 '12 at 15:26
It worked! Thank you very much. As to why, my first click loaded the second click function, is that right? –  Jeff Jul 27 '12 at 20:53
Yes, pretty much. Actually, in your code, every click calls your onScreen function, which adds your loader function to the onClick event handlers. So when you click a third time your onScreen function is called once and your loader function twice! ;) –  Julien Ch. Jul 29 '12 at 18:06

Change onScreen to

function onScreen(id){


What you did before was attaching a click event to the link when clicked. That means when you clicked for the first time it enabled the link to load your content for the next click thus only working the second time.

share|improve this answer

Hmm... first off, this is not the nicest solution. a nicer solution would be:

<a href="about.html" class="scriptable" id="about">About Us</a>
<a href="account.html" class="scriptable" id="account">My Account</a>


     function displayScreen(screenname){
         var url_to_load = screenname + '.html';

     $('.scriptable').live("click", function(ev){
         var screenname = $(this).attr('id');

Facebook does a similar solution, albeit they do it with rel="ajaxify" attribute, but the principle is exactly the same.

(Next step: use some kind of history api to make URLs follow user navigation)

share|improve this answer
Any recomends on a particular history api? –  Jeff Jul 27 '12 at 20:51
github.com/balupton/History.js - sorry, there were some Olympic game ceremonies going on :) –  Aadaam Jul 28 '12 at 1:45

You simply have some redundant code there. You attached two click events.

  1. Inline in the markup with the onClick attribute.
  2. In the onScreen() function with .click().

Only after you click the link does the actual .click() handler get created. So you had to click once to create a handler and then the second click would trigger the callback function.

You can remove the .click() and leave the code within that function. So your onScreen() function would look like this -

function onScreen(id){

You could also improve on the code by using this syntax instead -

  $("div#viewer").load($(this).id + '.html');

This assumes that you give all your <a> tags that you want to behave like this a class attribute of internalLink. Its much easier to give similar elements the same class name so that you can easily group them with a jQuery selector.

The newer .on() function are preferred since jQuery 1.7+

share|improve this answer
Thank you very much. I'll accept after I test it later today! –  Jeff Jul 27 '12 at 15:18

Seeing as you're using jQuery, ditch the inline onclick and bind instead. This makes your code cleaner, and easier to understand & modify.

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
    <p>welcome to this awesome site!</p>
        alert($(this).attr('id') + '.html');

Working JSFiddle

share|improve this answer
In your fiddle example you use jQuery 1.7 - why not move to the .on() function? –  Lix Jul 26 '12 at 22:07
also missing semicolon... –  Lix Jul 26 '12 at 22:14
@Lix re: on you're right. re: semicolon, they're not required here. mislav.uniqpath.com/2010/05/semicolons –  Michael Robinson Jul 26 '12 at 23:24
Just because you can ommit them - doesn't mean you should. I believe one should be consistent with their code styles. –  Lix Jul 26 '12 at 23:26
I believe that I wrote the answer very quickly and since the missing ; has no effect it is no big deal. Feel free to edit the answer and add it if it offends you so. –  Michael Robinson Jul 26 '12 at 23:27


share|improve this answer

Your Answer


