Question

我使用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');
    };
});

结果

新内容回到默认

所以问题是：如何使用按钮Back返回默认内容而不刷新整个页面？

Answer 1

那么“后退”锚点按钮无法在没有任何代码的情况下刷新页面，所以不会没有。

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

在：

$(document).ready(function() {

克隆容器的元素：

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

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

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

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

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

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

这是一个演示：

<强> DEMO

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

1 个答案: