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

Question

JQuery + HTML + CSS

我正在尝试获取导航栏上的链接以更新我拥有的“div”标签。我让它工作，但我必须在每个超链接在主查看器上加载页面之前单击两次。为什么？如何让它在单击后加载？

测试.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，将加载函数关联到点击事件。 因此，第二次单击时会触发加载功能。

编辑

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

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