Question

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?

test.js:

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

main.html:

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

etc.

<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.

Answer 1

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.

Edit

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

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})