javascript - 帮助我使 jquery AJAXed divs 的链接像 iframe 一样工作

Question

我想让同一页面上的几个 div 的工作方式与 iframe 类似。每个都会加载一个包含链接的 URL。当您单击这些链接时，我希望发出一个 AJAX 请求，并将 div 的 html 替换为单击链接页面中的新 html。这与在 iframe 内浏览页面非常相似。

这是我最初加载 div 的代码(此代码有效):

加载:

$.ajax({
  url: "http://www.foo.com/videos.php",
  cache: false,
  success: function(html){
    $("#HowToVideos").replaceWith(html);
  }
});
$.ajax({
  url: "http://www.foo.com/projects.php",
  cache: false,
  success: function(html){
    $("#HowToProjects").replaceWith(html);
  }
});

这是一个代码示例，我不太确定如何实现，但解释了这个概念。我可以获得一些选择器的帮助(用？括起来)，或者让我知道执行此操作的正确方法是什么？我还想显示一个加载图标，我需要知道放置该函数的正确位置在哪里。

$(".ajaxarea a").click(function(){
        var linksURL = this.href; // 
        var ParentingAjaxArea = $(this).closest(".ajaxarea");;
        $.ajax({
      url: linksURL,
      cache: false,
      success: function(html){
        $(ParentingAjaxArea).replaceWith(html);
      }
    });
    return false;
});

$(".ajaxarea").ajaxStart(function(){
    // show loading icon
});

Answer 1

假设您想监听具有 ajaxarea 类的所有元素内所有 anchor 标记的点击事件，那么您的选择器可以正常工作:

$(".ajaxarea a").click(function(){ .. });

这行代码虽然不是选择器(您只是访问被单击的 DOM 元素上的属性)，但也应该可以正常工作:

var linksUrl = this.href;

对于 ParentingAjaxArea，您需要使用 $(this).closest() 和选择器来确定您想要的父级，但很难给出一个具体的例子，但不知道你的 HTML 结构。看起来您希望 ParentingAjaxArea 成为 id #HowToProjects 或 #HowToVideos 的元素，因此您可以编写:

var ParentingAjaxArea = $(this).closest("#HowToProjects, #HowToVideos");

至于加载对话框，我认为this answer解释了一个很好的方法(使用 ajaxStart 和 ajaxStop)。

编辑:我还注意到您正在使用 click 事件 - 如果您计划能够将事件处理程序附加到将插入 DOM 的链接稍后通过 AJAX，查看 delegate或live .