简单的jQuery的Ajax外部页面内容加载

这是我第一天编码和使用jQuery，我认为最好的学习方法是实践。我想从#container中删除内容并从外部页面添加新内容。应该是相当简单的吧？我到目前为止，但它不是每次都工作。任何援助将是伟大的。简单的jQuery的Ajax外部页面内容加载

$(document).ready(function(){ 

    $('.nav a').click(function(){ 

     var url = $(this).attr('href')+' #content'; 

     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 

     $('#container').load(url); 

     return false;  

    }); 
});

的index.html

<html> 

<body> 

<div id="container"> 


    <div id="content"> 
     <div class="nav"> 
      <a href="index.html" id="home">Home</a> 
      <a href="about.html" id="about">About</a> 
      index 
     </div> 
    </div> 
</div>

和about.html

<body> 

<div id="container"> 


    <div id="content"> 
     <div class="nav"> 
      <a href="index.html" id="home">Home</a> 
      <a href="about.html" id="about">About</a> 
      about 
     </div> 
    </div> 
</div>

此刻它仅适用于其他每次点击。

感谢您的期待

来源

2012-01-12 user1145347

您正在用您加载的新元件替换原来的HTML元件。但与此同时，click事件处理程序与元素一起被删除，不再有效。

在旧版本的jQuery中，您可以使用live()而不是click()来克服此问题，但使用最新版本 - 我不是最新版本。我相信这里有人会增加0.02美元的帮助。

编辑：原来你可以使用on()

$(document).on("click", ".nav a", function() { 
    //code goes here 
});

来源

2012-01-12 11:40:15 bububaba

谢谢，我明白，我正在删除.nav菜单，从而破坏jQuery的功能。但有效地，我希望能够加载和替换整个页面。有没有不同的方式来做到这一点，而不会失去jQuery的功能。
我似乎无法得到.on（“click”正在运行... – user1145347 2012-01-12 11:58:50

您将不得不提供更多详细信息。如果有任何错误消息，您将使用哪种版本的jQuery？您是否阅读过jQuery关于'on（）'和'live（）'的文档 – bububaba 2012-01-12 12:09:01

抱歉提出了一个简单的错误，这很好，看起来我有更多的练习要做，稍微有些失望，但希望我很快就会好起来。接受的答案 – user1145347 2012-01-12 12:20:25

更换了.nav，其中包含与jQuery的处理程序的HTML内容。

首先点击，取代.nav菜单 - 丢失jquery功能。
第二次点击，传统的超链接 - 重新加载页面 - jQuery的功能返回。

为了让自己开始尝试将某些东西加载到.nav以外的元素中，而不是在.nav中。

来源

2012-01-12 11:51:01

谢谢，我明白我正在删除.nav菜单，从而破坏了jquery的功能。但是，我希望能够加载并替换整个页面。是否有不同的方法可以做到这一点而不会丢失jQuery的功能。 – user1145347 2012-01-12 11:56:13

简单的jQuery的Ajax外部页面内容加载

回答

相关问题