Question

这是我编写和使用jquery的第一天，我认为最好的学习方法是练习。我想从#container中删除内容并从外部页面添加新内容。应该挺直接的吧？到目前为止我有这个，但它每次都不起作用。任何帮助都会很棒。

JS

$(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>

目前它只能在每次点击时使用。

感谢您寻找

Answer 1

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

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

修改：原来可以使用on()

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

Answer 2

使用jquery处理程序替换包含html的.nav的内容。

首先单击，替换.nav菜单 - 丢失jquery功能。
第二次点击，常规超链接 - 重新加载页面 - jquery功能返回。

要开始尝试，请尝试将某些内容加载到.nav以外的元素中，而不是在.nav。

中

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

2 个答案: