Jquery OnClick 事件 - 我可以缓存页面以便它不会一次又一次地加载答案

【问题标题】：Jquery OnClick Event - can I cache the page so it doesn't load again and againJquery OnClick 事件 - 我可以缓存页面以便它不会一次又一次地加载
【发布时间】：2024-04-25 23:50:01
【问题描述】：

关于

当我们点击 About 链接时，它会在 div 中加载 about.html，这是函数

function(about) { $('#idx').load('about.html'); }

我希望它应该缓存或其他东西，所以当我下次单击关于我们时它不应该再次加载该页面。

目前，每次单击该链接时它都会调用 about.html。我可以只加载一次吗？如果该链接已被单击，它应该会获得缓存，因此下次它不会再次加载。

About.html 是一个很重的页面，因为它从 xml 读取数据。所以，如果用户再次点击该链接，我只想加载一次并使用缓存。

请提出建议。

【问题讨论】：

标签： jquery browser-cache

【解决方案1】：

(function() {

    var cache = {},
        aboutUsEl = $('#AboutUs');

    var aboutUs = function () {
        if (cache['aboutus']) {
            aboutUsEl.html(cache['aboutus']);
        } else {
            $.get('about.html')
                .done(function(response) {
                    cache['aboutus'] = response;
                    aboutUsEl.html(response);
                });
        }

    };

    aboutUsEl.click(aboutUs);

})();

【讨论】：

var aboutUs = ... 不需要是window.aboutUs = ...
如果事件处理程序被放在同一个范围内，我做了一个假设但不清楚，但话又说回来，它说函数在 onclick 事件中被调用，并且范围是这不是问题的一部分。
当然。我只是想确定提到了范围问题。（我怀疑，正如另一条评论所证实的那样，OP 正在使用内联 onclick="aboutUs()"。）
好吧，我还没有看到你的 HTML，但是如果你使用的是内联 JS，你将无法按原样使用它。我将更新以显示没有内联 JS 的情况。

【解决方案2】：

使用.one

$("#AboutUs").one("click", function() {
   $(this).load('about.html');
})

更新

替代方法（点击具有id的链接将从about.html加载html）

$("a#linkID").click(function (e) { 
      $("#AboutUs").load('about.html');
      $(this).unbind(e.eventType);
});

注意：

请参阅 .load 上的附加说明

由于浏览器安全限制，大多数“Ajax”请求都受制于同源政策；请求无法成功检索来自不同域、子域或协议的数据。

【讨论】：

OP 希望链接继续工作，只是不想多次执行 Ajax 请求。
$("#AboutUs").one("click", function() { $(this).load('about.html'); }) 我也在做同样的事情，但它不起作用.请帮忙！！

【解决方案3】：

查看 pjax：http://pjax.heroku.com/。一旦 PJAX 被加载到您的页面上，您就可以执行以下操作（来自 readme）：

<div id="main"><!--content will be loaded here--></div>
<a href='/explore' data-pjax='#main'>Explore</a>

$('a[data-pjax]').pjax()

【讨论】：

您是否根据文档在链接上进行了初始化？我已经修改了我的答案以澄清。
About 当我们点击 About 链接时，它会在 div 中加载 about.html，这里是函数 $.get('about.html', function(data) { $('#idx')。 html(数据);});我希望它应该缓存或其他东西，所以当我下次点击关于我们时它不应该再次加载该页面。