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事件。 加载功能因此在您第二次点击时触发。

编辑

一个解决办法是，以消除你的<a href=#>标签

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

Answer 2

更改屏幕到

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

说明：

什么你没有之前click事件附加到链接时点击。这意味着，当您第一次点击时，它会启用链接加载您的内容以进行下一次点击，因此只能在第二次点击。

Answer 3

的onclick属性你只是有一些多余的代码存在。您附加了两个点击事件。

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 4

看到的是优选的，因为你正在使用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 5

尝试

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

Answer 6

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

<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，使网址遵循用户导航）