Javascript 创建在使用jQuery for AJAX时向后导航的方法

我使用jQuery

.load（）

将内容动态加载到页面的一部分。 它工作得很好，但我很难为用户在加载新内容后导航回原始内容

我已经用css创建了一个“关闭”图标，该图标存在于加载的新页面上，但我不确定如何设置jQuery/JavaScript，以便它将用户导航回页面该部分的原始状态

这是相关的js：

// pages to load
var loadLudwig = "lw.html";


$("#work a:first-child").click(function() {
  $("#work").fadeTo('slow', 0, function() {
    $("#work").load(loadLudwig, function(){
      $("#work").fadeTo('slow', 1);
    });
  });
}); 
// (& this part is working fine)

相关的HTML（在原始页面上）如下所示（它是嵌入在锚定标记中的图像网格）：

但是这会加载非常奇怪的内容。

#work

的一些原始功能丢失了

---

如何让我的关闭按钮导航回

#work

的原始状态？

您可能需要将html保存在某个地方。例如：

// Top of file
var oldHTML = "";

// Lots of stuff...

$("#work a:first-child").click(function() {
  $("#work").fadeTo('slow', 0, function() {
    // Store the old html
    oldHTML = $("#work").html();
    $("#work").load(loadLudwig, function(){
      $("#work").fadeTo('slow', 1);
    });
  });
});

// Code for the close button

$("#close-button").click(function() {
  $("#work").fadeTo('slow', 0, function () {
    $("#work").html(oldHTML).fadeIn("slow");
  });
});

或者，您可以创建另一个子项，而不是替换html。当然，您可能需要稍微更改标记

<section id="work">
  <div id="oldHTML">
    <a href="#">...img and svg stuff</a>
  </div>
  <div id="newSection" style="display:none;">
  </div>
</section>

---

.load（）

的jquery文档中指出：

脚本执行 使用不带后缀选择器的URL调用.load（）时 表达式，则在创建脚本之前将内容传递到.html（） 远离的。这将在脚本块被丢弃之前执行它们。如果 .load（）是通过附加到URL的选择器表达式调用的， 但是，在更新DOM之前，脚本会被剥离， 因此没有执行。两种情况的示例如下所示：

在这里，作为文档的一部分加载到#a中的任何JavaScript都将 成功执行

1. $( "#a" ).load( "article.html" );

但是，在下面的情况下，要删除的文档中的脚本块 加载到#b中的数据被剥离，且未执行：

1. $( "#b" ).load( "article.html #target" );

这是缺乏功能的一个可能原因

我还将研究事件绑定。在您的代码示例中，您使用的是

。单击
，但如果您正在加载内容或正在动态创建元素，您应该更喜欢。此方法委派事件，而不只是将它们绑定到DOM节点

我建议你通读整篇文章

编辑：
这里有一个快速而肮脏的方法来达到效果

// pages to load
var loadLudwig = "lw.html",
    $ludwig,

    $work = $('#work'),
    $workContent = $work.children(),

    $closeButton = $("#close-button");

$work.find('a:first-child').click(function() {
  $work.fadeTo('slow', 0, function() {
    //Here is the tricky part
    //Detaching keeps all the jQuery data on the elements
    $workContent.detach();

    //The first time, load the content, 
    //if the content is already loaded
    //append it to the container
    if(!$ludwig){
        $work.load(loadLudwig, function(){
          //Save the content in a var
          //so you can reuse it later
          $ludwig = $work.children();
          $work.fadeTo('slow', 1);
        });
    } else {
        $ludwig.appendTo($work);
        $work.fadeTo('slow', 1);
    }
  });
});

$closeButton.click(function() {
  $work.fadeTo('slow', 0, function () {
    //Remove the old content, don't worry
    //because is stored in $ludwig
    $work.children().detach();

    //Instead of reloading the content, just
    //attach the fragment again
    $workContent.appentTo($work);        
    $work.fadeTo('slow', 1);
  });
}); 

功能丧失是什么意思？另外，建议将
$（“#work”）
存储在一个变量中，为了避免在#work中进行不必要的查找，我使用了SVG，当用户悬停在锚上时，它会在IMG上设置动画。这就消失了。另外，我在section标签上的一个类（id=“work”）为#work提供了一个空白，以容纳一个固定的导航栏。以这种方式使用jQuery加载内容会使边距类的效果加倍非常感谢您在这方面花费的时间，伙计。我真的很感激。我注释掉了我的旧代码并使用了你的代码；除了“关闭”按钮外，一切正常。当我点击#关闭按钮时，所有的工作都消失了。实际上有一个输入错误（最后一个.appendTo），但是现在新内容淡出，只是重新加载自己（而不是重新加载旧内容）
1. $( "#a" ).load( "article.html" );

1. $( "#b" ).load( "article.html #target" );

// pages to load
var loadLudwig = "lw.html",
    $ludwig,

    $work = $('#work'),
    $workContent = $work.children(),

    $closeButton = $("#close-button");

$work.find('a:first-child').click(function() {
  $work.fadeTo('slow', 0, function() {
    //Here is the tricky part
    //Detaching keeps all the jQuery data on the elements
    $workContent.detach();

    //The first time, load the content, 
    //if the content is already loaded
    //append it to the container
    if(!$ludwig){
        $work.load(loadLudwig, function(){
          //Save the content in a var
          //so you can reuse it later
          $ludwig = $work.children();
          $work.fadeTo('slow', 1);
        });
    } else {
        $ludwig.appendTo($work);
        $work.fadeTo('slow', 1);
    }
  });
});

$closeButton.click(function() {
  $work.fadeTo('slow', 0, function () {
    //Remove the old content, don't worry
    //because is stored in $ludwig
    $work.children().detach();

    //Instead of reloading the content, just
    //attach the fragment again
    $workContent.appentTo($work);        
    $work.fadeTo('slow', 1);
  });
});