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

编辑

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

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

Answer 2

将屏幕更改为

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

说明：

您之前所做的是在点击时将点击事件附加到链接。这意味着当您第一次点击时，它会启用链接来加载您的内容以供下次点击，因此只能在第二次点击时工作。

Answer 3

嗯...首先，这不是最好的解决方案。更好的解决方案是：

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

和

$(document).ready(function(){
     function displayScreen(screenname){
         var url_to_load = screenname + '.html';
         $('#viewer').load(url_to_load);

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

Facebook 做了类似的解决方案，虽然他们用 rel="ajaxify" 属性来做，但原理是完全一样的。

（下一步：使用某种历史 API 使 URL 跟随用户导航）

Answer 4

那里只是有一些冗余代码。您附加了两个点击事件。

1. 使用onClick 属性在标记中内联。
2. 在onScreen() 函数中使用.click()。

只有在您单击链接后，才会创建实际的 .click() 处理程序。所以你必须点击一次来创建一个处理程序，然后第二次点击会触发回调函数。

您可以删除.click() 并将代码保留在该函数中。所以你的 onScreen() 函数看起来像这样 -

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

---

您也可以改用这种语法来改进代码 -

$('a.internalLink').on('click',function(
  $("div#viewer").load($(this).id + '.html');
));

这假设您为所有想要表现得像这样的<a> 标记提供internalLink 的类属性。为相似的元素赋予相同的类名要容易得多，这样您就可以使用 jQuery 选择器轻松地对它们进行分组。

较新的.on() function 自 jQuery 1.7+ 起是首选

Answer 5

看到您正在使用 jQuery，放弃内联 onclick 并改为绑定。这使您的代码更简洁，更易于理解和修改。

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
<div class ="article" id="viewer">
    <p>welcome to this awesome site!</p>
</div>
​<script>
$(function(){
    $("a.viewer").click(function(){
        alert($(this).attr('id') + '.html');
        $("div#viewer").load(this.id + '.html')
    });  
})​;
</script>

Working JSFiddle

Answer 6

试试

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