使用 load() 后返回默认内容答案

【问题标题】：return to default content after using load()使用 load() 后返回默认内容
【发布时间】：2014-05-22 04:20:40
【问题描述】：

我使用 load() 将内容从其他页面加载到目标元素，如下所示：

<div id="container">
 <h1>Example Heading</h1>
 <p>Example content.</p>
 <a href="#" role="button" id="load">Load more</a>
</div>
<a href="#" role="button" id="back">Back to default</a>

jQuery

$(document).ready(function() {  
    $('#load').click(function() {
          $('#container').load('content.html');
    };
});

结果

新内容恢复默认

所以问题是：如何在不刷新整个页面的情况下使用“返回”按钮返回默认内容？

【问题讨论】：

在页面加载时将内容保存在变量中，并在单击返回按钮时将其放回？
你能帮我吗？我认为捕获按钮单击事件会刷新整个页面，不是吗？
你是指浏览器的后退按钮还是上面的返回默认按钮？
返回默认按钮，谢谢！

标签： jquery ajax jquery-load

【解决方案1】：

没有任何代码，“返回”锚按钮无法刷新页面，所以不会。

对于你的问题，你可以.clone()页面加载后的元素，（clone()基本上复制元素内容）然后当你点击加载更多时，它会加载html 内容，当点击 回到默认值 时，它会将我们克隆的元素放回容器中。以下是你的做法：

开启：

$(document).ready(function() {

克隆容器的元素：

cloned = $('#container').clone();

点击返回按钮后，将其放回容器中：

$('#back').click(function() {
      $('#container').html(cloned);
});

最后一件事是 load more 按钮不会再次被触发，因为它在被某些 html 替换后已被动态放回。所以 click 处理程序没有附加到它，所以将你的 load more 点击事件更改为：

$(document).on('click','#load',function() {
      $('#container').load('content.html');
});

.on() 将事件处理程序附加到动态创建的元素。

这是一个演示：

DEMO

【讨论】：