Javascript 使用AJAX追加DIV内容-上一个/下一个

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

我试图让它这样，当你点击“上一个”和“下一个”按钮，它加载上一个或下一个项目

这是我的代码

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

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');
      });
    });
  });
});

$（文档）.ready（函数（）{
$（'p-load'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
if（$（'#ajax'）。是（':visible'））{
$（'#ajax'）.css（{display:'block'}）.animate（{height:'auto'}）.empty（）；
}
$（#ajax'）.css（{display:'block'}）.animate（{height:'auto'}，function（））{
$（'#ajax'）.html（''）；
$（'#loader'）.css（{边框：'none'，位置：'absolute'，顶部：'50%'，左侧：'50%'，边距：'-24px0-24px'，框影：'none'）；
$（'#ajax'）.load（'includes/projects.html'+href，function（））{
$（'#ajax'）.hide（）.fadeIn（'slow'）；
});
});
});
});

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

---

非常感谢您的帮助

试试这样的东西

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

});

原因：

.p-load

元素是动态加载的，在DOM加载中不存在。所以使用jquery委托

参考：

我更喜欢使用DOM加载中存在的modal的父元素。因此，我认为在您的情况下，它将是

.p-modal

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

---

绑定上一个和下一个按钮链接上的单击事件。确保在页面加载和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');
    });
  });
});

$（'a.next，a.prev'）。打开（'click'，函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
if（$（'#ajax'）。是（':visible'））{
$（'#ajax'）.css（{display:'block'}）.animate（{height:'auto'}）.empty（）；
}
$（#ajax'）.css（{display:'block'}）.animate（{height:'auto'}，function（））{
$（'#ajax'）.html（''）；
$（'#loader'）.css（{边框：'none'，位置：'absolute'，顶部：'50%'，左侧：'50%'，边距：'-24px0-24px'，框影：'none'）；
$（'#ajax'）.load（'includes/projects.html'+href，function（））{
$（'#ajax'）.hide（）.fadeIn（'slow'）；
});
});
});

我想我知道你所说的“页面加载”是什么意思，但是你能解释一下“ajax完整调用”吗？我是AJAXok的超级高手。。我看到一个探索项目按钮。当我从firebug控制台注入这段代码并单击next按钮时，它会显示正在加载的图像，然后显示带有项目详细信息的div。这是对location GET的ajax调用。找到ajax调用并完成它。重新绑定上述事件，使“上一步”和“下一步”按钮工作。下面是如何找到ajax成功调用的答案好的，这为我指明了正确的方向。最后我使用了.ajaxComplete（）并使用了您在调用中建议的代码<代码>$（文档）.ajaxComplete（函数（）{//Dave的代码在这里）}

$('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');
    });
  });
});