Javascript 如何在同一文件夹中加载远程html页面链接<;部门>;集装箱?

Javascript 如何在同一文件夹中加载远程html页面链接<;部门>;集装箱?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这对我来说很难解释,但我会尽我最大的努力 我正在使用HTML、CSS和JavaScript编写一种便携式图书系统。它本质上是一个网站;你可以把软件包放到网上,它可以像一个完整的网站一样运行,或者把它放在机器上本地阅读,就好像它是一个网站一样 这意味着我不能使用PHP或MySQL之类的东西;这都是使用浏览器功能,因为任何在自己的计算机上阅读它的人都不可能安装WAMP或类似的软件来运行它 我在尝试使主.htm文件中的标记始终加载外部.htm文件时遇到问题,即使这些外部.htm文件有自己的链接 我曾尝

这对我来说很难解释,但我会尽我最大的努力

我正在使用HTML、CSS和JavaScript编写一种便携式图书系统。它本质上是一个网站;你可以把软件包放到网上,它可以像一个完整的网站一样运行,或者把它放在机器上本地阅读,就好像它是一个网站一样

这意味着我不能使用PHP或MySQL之类的东西;这都是使用浏览器功能,因为任何在自己的计算机上阅读它的人都不可能安装WAMP或类似的软件来运行它

我在尝试使主.htm文件中的
标记始终加载外部.htm文件时遇到问题,即使这些外部.htm文件有自己的
链接

我曾尝试使用jQuery运行
load()
,但当呈现新内容并单击该新内容中的链接时,它完全从我的主页退出,并将完整的外部.htm文件加载到我的浏览器中

我想我明白为什么。加载后使用
$('a')
时,它只将该函数呈现给index.htm自己的链接,而不是我加载到
中的新链接

我不想要这种效果。我希望每次加载的每个链接总是将链接的.htm文件中的内容绘制到index.htm的

我环顾四周,在这里找到了几个相关的答案,但它们要么不起作用,要么给了我相同的结果。一个是一个名为“PJAX”的插件,它看起来像是在库示例中工作的,但当我将它加载到自己的项目中时,它没有运行。我尝试过使用我在另一个答案中看到的
ajax()
调用,该答案解决了
url
缓存
success
参数,但没有成功

我做错了什么?我不认为像加载一个外部.htm文件并在其
中重复加载这样简单的事情不会像阻止我修复这个问题那样复杂。我以为
load()
函数完成了这项工作,直到我单击了其他
链接

代码示例有助于澄清我所说的内容。不是完整的文件或完美的,而是一个模型

index.htm

<body> <!-- book interface -->
    <div id="content"></div>
</body>

当page2的链接加载到索引的
中,并且您单击其中的链接时,它不会将
更改为page1的内容。它将第1页的全部内容重新加载到浏览器中。

查德的答案是正确的。如果有人想插嘴,我想知道它是如何工作的

$(document).ready(function(){
  $(document).on('click', 'a', function(e){
    e.preventDefault();
    var ahref = $(this).attr('href');
    $('#content').load(ahref);
    return false;
  });
});

你能试着提供一个代码笔或类似的吗?我认为你只需要使用一个闭包就可以了。试着用事件委派来代替。类似于
$(document).on('click','a',function(){…})
Chad的技术起作用了。它与jQuery的旧
live
方法在相同的前提下工作。它将事件处理程序绑定到始终存在的文档,然后在项目来来去去时委托给子项目。这是一种将事件绑定到页面上可能存在或不存在的元素的方法。您可以在此处阅读更多内容:
$(document).ready(function(){
      $('a').click(function(e){
        e.preventDefault();
        $('#content').load($(this).attr('href'));
        return false;
      });
    });
$(document).ready(function(){
  $(document).on('click', 'a', function(e){
    e.preventDefault();
    var ahref = $(this).attr('href');
    $('#content').load(ahref);
    return false;
  });
});