第一次单击时不加载JQuery/HTML链接

Question

JQuery + HTML + CSS

我试图获取导航栏上的链接以更新我的"div"标签.我得到了它的工作,但我必须先点击每个超链接两次,然后才能在主浏览器上加载页面.为什么？如何只需点击一下即可将其加载？

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>

等等

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

在同一文件夹中有一个"about.html"文件(和所有其他必要文件).同样,代码功能,只是不应该如此.

Answer 1

第一次单击执行onScreen,它将加载功能与click事件相关联.因此,第二次单击时会触发加载功能.

编辑

解决方案可能是删除标记onclick上的属性<a href=#>

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