Jquery 使用load（）后返回默认内容

我使用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>

结果

新内容 回到默认状态

---

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

返回锚按钮无法在没有任何代码的情况下刷新页面，因此不会

对于您的问题，您可以在页面加载后复制元素，克隆基本上复制元素内容，然后当您单击load more时，它将加载html内容，当单击back to default时，它将把我们克隆的元素放回容器中。以下是您的操作方法：

关于：

克隆容器的元素：

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

单击“后退”按钮后，将其放回容器中：

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

最后一件事是LoadMore按钮不会再次触发，因为它在被一些html替换后被动态地放回。因此，单击处理程序未附加到它，因此将load more click事件更改为：

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

将事件处理程序附加到动态创建的元素

下面是一个演示：

---

在页面加载时将内容保存在变量中，并在单击“上一步”按钮时将其放回原处？您能帮我吗？我想点击按钮事件会刷新整个页面，不是吗？你是说浏览器的后退按钮还是你上面的返回默认按钮？返回默认按钮，谢谢！

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

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