使用 AJAX 附加 DIV 内容 - 上一个/下一个答案

【问题标题】：Append DIV content using AJAX - Previous/Next使用 AJAX 附加 DIV 内容 - 上一个/下一个
【发布时间】：2014-12-06 13:37:44
【问题描述】：

所以我要做的是将 HTML 文档中的内容附加到我已经使用 AJAX 将内容加载到（来自同一个文件）的 DIV 中。

我正在尝试使用它，因此当您单击“上一个”和“下一个”按钮时，它会加载上一个或下一个项目。

这是我的代码。

HTML（我正在将内容加载到#ajax）

<div class="p-modal">
    <div id="p-controls">
        <a id="p-close" href="javascript:;">Close</a>
    </div>
    <div id="ajax"></div>
</div>

jQuery

$(document).ready(function() {
  $('.p-load').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    if ($('#ajax').is(':visible')) {
      $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty();
    }
    $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() {
      $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">');
      $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxShadow:'none' });
      $('#ajax').load('includes/projects.html ' + href, function() {
        $('#ajax').hide().fadeIn('slow');
      });
    });
  });
});

DEMO（向下滚动到“工作”部分 - 如果您打开一个项目然后关闭它，它可以单独加载每个项目，但是当我在“上一个”和“下一个”上使用上面相同的代码时在项目弹出窗口中触发，它不做任何事情）

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

在 PREV 和 NEXT 按钮链接上绑定点击事件。确保在页面加载和 Ajax 完成调用时执行此操作。它确实有效，我从 firebug 测试过。

$('a.next,a.prev').on('click', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  if ($('#ajax').is(':visible')) {
    $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty();
  }
  $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() {
    $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">');
    $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxShadow:'none' });
    $('#ajax').load('includes/projects.html ' + href, function() {
      $('#ajax').hide().fadeIn('slow');
    });
  });
});

【讨论】：

我想我知道您所说的“页面加载”是什么意思，但您能解释一下“ajax 完整调用”吗？我是 AJAX 的超级菜鸟
ok.. 我看到一个探索项目按钮。当我从 firebug 控制台注入此代码并单击下一步按钮时，它会显示加载图像，然后显示带有项目详细信息的 div。那是对位置 GET the.gs/testlink/kevin/includes/projects.html 的 ajax 调用。找到那个ajax调用并完成。重新绑定上述事件以使 prev 和 next 按钮起作用。这是如何找到ajax成功调用stackoverflow.com/questions/21648356/…的答案
好的，这为我指明了正确的方向。我最终使用了 .ajaxComplete() link 并使用了您在该调用中建议的代码。 $( document ).ajaxComplete(function() { //Dave's code here )};

【解决方案2】：

试试这样的

$('document').on('click','.p-load' function(e) {
 // your code goes here.

});

原因：.p-load 元素是动态加载的，在 DOM 加载时不存在。所以使用 jquery 委托

参考：http://api.jquery.com/delegate/

我更喜欢使用 DOM 加载时存在的模态的父元素。所以我认为你的情况是.p-modal

 $('.p-modal').on('click','.p-load' function(e)

【讨论】：