AJAX/JQuery加载整个页面而不是div

我开始学习移动应用开发，并且我已经遇到了障碍。我有以下文件：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); 
    }); 


}

请问有人能告诉我，为什么上面的代码显示整个页面时，我当它的意思只有一个点击抢的的＃内容股利远程页面？

谢谢！

来源

2012-07-09 greenpool

目前，当你点击一个链接时，'hijackLinks（）'不会运行，因为你没有绑定任何点击事件。你有函数内部函数的监听器。 – 2012-07-09 01:15:49

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。

来源

2012-07-09 01:11:57 nbrooks

AJAX/JQuery加载整个页面而不是div

回答

相关问题