Question

我想在同一页面上制作一些与iframe类似的div。每个都将加载包含链接的URL。当你点击这些链接时，我想要一个AJAX请求，并用点击链接页面中的新html替换div的html。它与在iframe中浏览页面非常相似。

这是我最初加载div的代码（此代码有效）：

的onload：

$.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收听所有元素内的所有锚标记的点击事件，那么您的选择器工作正常：

$(".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事件 - 如果您计划将事件处理程序附加到稍后将通过AJAX插入DOM的链接，查看delegate或live。

Answer 2

$(".ajaxarea a").live('click',function(e){
  e.preventDefault(); //*
  var URL = $(this).attr('href');
  var parentFrame = $(this).parent(".ajaxarea"); //**
  $.ajax({
    url: URL,
    cache: false,
    success: function(html){
      parentFrame.replaceWith(html); //***
    }
  });
});

* - 添加preventDefault以阻止点击操作（请参阅函数参数中的e）
** - 而不是closest，我使用了parent - 更喜欢它的描述性质
*** - 包含父级AJAX框架的var 应该是jQuery对象，无需将其包装在$(..)

这应该可以正常工作，但要注意，这是未经测试的。

修改：

你可能需要现场直播（好吧，我确定你需要它）。 click()它是什么使它在DOM onClick事件中添加到所有元素。 live()做什么，它等待DOM中的任何更改并再次运行使用的选择器（.ajaxarea a），如果它适合任何新元素，它会添加操作。在伪代码中，它基本上是这样的：

DOM.hasChanged{ $('selector').click(..) }

Answer 3

我将此示例用于我自己的网页：

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

它运行良好，并使用哈希标记和jQuery.history.js作为浏览器的历史记录。它非常好用，因为你可以让像媒体播放器这样的东西继续播放。看看my own site elsewise，您可以在其中找到javascript文件：ajaxpages.js。我没有使用live()，但也许我应该。

Answer 4

想出来！问题是我使用的函数“.replacewith（）”完全删除了我的AJAXed div（class =“ajaxarea”）而不是替换内容。这里使用的正确函数是“.html（）”。

这是我的工作代码，使AJAXed div像iframe一样工作：

//onload to initialize the div
$.ajax({
  url: "http://www.foo.com/projects.php",
  cache: false,
  success: function(html){
    $('#HowToProjects').html(html);
  }
});

$(".ajaxarea a").live('click',function(e){ // must use live instead of .click()
  e.preventDefault();
  var URL = $(this).attr('href');
  var parentFrame = $(this).closest(".ajaxarea");
  $.ajax({
    url: URL,
    cache: false,
    success: function(html){
      parentFrame.html(html);
    }
  });
});

帮我制作一个jquery AJAXed divs的链接像iframe一样工作

4 个答案: