加载外部 html 后返回答案

【问题标题】：back after loading external html加载外部 html 后返回
【发布时间】：2012-06-14 15:38:12
【问题描述】：

一直在绞尽脑汁（我是 jQuery 等新手）。

我已经设法在点击时将一个外部 html 文件加载到我的页面中，但不知道如何返回到该 div 中以前的内容。

我的代码：

$(document).ready(function(){
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      $('#main').empty();
      $('#main').load(link);
   });
});

任何帮助将不胜感激。

谢谢！

【问题讨论】：

.load 将在加载新内容之前empty div。但是，您可以尝试在 .load 之前克隆 div 并根据需要使用克隆。注意：$('#main').empty(); 然后$('#main').load(link); 是多余的，因为.load 将清空 div。

标签： jquery upload back

【解决方案1】：

您可以克隆 div 并将其存储在变量中：

 var whatWas = $('#main').clone();

【讨论】：

【解决方案2】：

.load 将在加载新内容之前清空 div。但是，您可以尝试在 .load 之前克隆 div 并根据需要使用克隆。

注意：$('#main').empty(); 和 $('#main').load(link); 是多余的，因为 .load 将清空 div。

尝试如下，

$(document).ready(function(){
   var $mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      $mainClone = $('#main').clone().prop('id', 'main-clone'); //clone and change ID
      $('#main').load(link);
   });      
});

稍后您可以使用以下内容替换#main 内容，

$('#main').html($mainClone.html())

【讨论】：

@Bennjamin_ 尝试设置您所拥有的jsFiddle.net，我们可以在那里试用。
是这样的。 jsfiddle.net/vgh64/7 我不知道如何在 jsfiddle 中设置 ajax。当您单击图片时，应该有一个“返回链接”，这将是返回克隆内容的事件。这有意义吗？
$('#main').html($mainClone.html()) 不会完全替换 div，它会将 div 的新副本放在旧副本中。实际更换见stackoverflow.com/questions/1344030/…。

【解决方案3】：

在加载新的 HTML 之前，您需要存储 div 中的内容。您很可能需要将其存储在全局变量中。

<script type="text/javascript">
    var whatWas;

    $(document).ready(function(){
       $('.project').click(function(e){
          global whatWas;
          var link = $(this).attr('rel');
          whatWas = $('#main').clone();
          event.preventDefault();
          $('#main').empty();
          $('#main').load(link);
       });
    });

    ...
    //here you need to catch the event that you want to use to load the original content back into the div
</script>

当您想返回时，您可以将 div 替换为原始 HTML，如下所示：

$('#main').html(whatWas);

【讨论】：