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，使網址遵循用戶導航）