2012-07-09 58 views
3

我開始學習移動應用開發,並且我已經遇到了障礙。我有以下文件:AJAX/JQuery加載整個頁面而不是div

1. android.html 
2. index.html 
3. android.js 

android.html充當加載頁面並在加載頁面時將index.html鏈接拖入其中。當一個鏈接被點擊時,它只是意味着從#content div將遠程頁面的數據加載到android.html的#container div中。但這似乎不適用於我。

下面的代碼:

android.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Jonathan Stark</title> 
     <meta name="viewport" content="user-scalable=no, width=device-width" /> 
     <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" /> 
     <link rel="stylesheet" href="css/android.css" type="text/css" media="screen" /> 
     <script src="cordova-1.6.1.js" type="text/javascript"></script> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="android.js"></script> 
    </head> 
    <body> 
     <div id="header"><h1>Test</h1></div> 
     <div id="container"></div> 
    </body> 
</html> 

的index.html:

<html> 
    <head> 
     <title>Jonathan Stark</title> 
     <meta name="viewport" content="user-scalable=no, width=device-width" /> 
     <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> 
     <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> 
     <!--[if IE]> 
      <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
     <![endif]--> 
     <script src="cordova-1.6.1.js" type="text/javascript"></script> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="android.js"></script> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header"> 
       <h1><a href="./">Jonathan Stark</a></h1> 
       <div id="utility"> 
        <ul> 
         <li><a href="about.html">About</a></li> 
         <li><a href="blog.html">Blog</a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
       <div id="nav"> 
        <ul> 
         <li><a href="consulting-clinic.html">Consulting Clinic</a></li> 
         <li><a href="on-call.html">On Call</a></li> 
         <li><a href="development.html">Development</a></li> 
         <li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li> 
        </ul> 
       </div> 
      </div> 
      <div id="content"> 
       <h2>About</h2> 
       <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p> 
      </div> 
      <div id="sidebar"> 
       <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png"> 
       <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p> 
      </div> 
      <div id="footer"> 
       <ul> 
        <li><a href="services.html">Services</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="blog.html">Blog</a></li> 
       </ul> 
       <p class="subtle">Jonathan Stark Consulting, Inc.</p> 
      </div> 
     </div> 
    </body> 
</html> 
我幾乎用這個作爲一個基本頁面

所有鏈接/遠程頁面。只需更改上面#content div中的h2標籤標題即可。

android.js:

$(document).ready(function() { 
    loadPage(); 

}); 

function loadPage(url){ 
    if (url == undefined){ 

     $('#container').load('index.html #header ul',hijackLinks); 

    } 
    else{ 


    $('#container').load(url + '#content',hijackLinks);  

    } 


} 

function hijackLinks(){ 

    $('#container').click(function(e) { 

     e.preventDefault(); 

     loadPage(e.target.href); 
    }); 


} 

請問有人能告訴我,爲什麼上面的代碼顯示整個頁面時,我當它的意思只有一個點擊搶的的#內容股利遠程頁面?

謝謝!

+0

目前,當你點擊一個鏈接時,'hijackLinks()'不會運行,因爲你沒有綁定任何點擊事件。你有函數內部函數的監聽器。 – 2012-07-09 01:15:49

回答

3

http://api.jquery.com/load/

如果一個或多個空格字符被包括在字符串中,假設第一空間後的字符串的一部分是一個jQuery選擇,其確定​​要加載的內容。

換句話說,你需要url#content之間的空間在你的第二個​​來電或jQuery的認爲這是URL的一部分。

變化:

$('#container').load(url + '#content',hijackLinks); 

要:

$('#container').load(url + ' #content',hijackLinks); 

此外,點擊監聽器應該在你的文檔準備回調調用。傳入負載回調的函數實際上是一個success回調函數,在ajax調用成功時執行。雖然它在第一次加載完成時運行,但它仍然在文檔準備好的狀態下被調用,但它並不完全清楚,並且沒有必要將它放在那裏。您可以從您的電話中刪除hijackLinks至​​。

$(document).ready({ hijackLinks(); loadPages(); });

附:如果hijackLinks應該在鏈接點擊上執行,請將.click方法中的選擇器從#container更改爲#container a

相關問題