Question

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

当你点击＆＃34;之前的＆＃34;时，我试图这样做。和＆＃34; next＆＃34;按钮它加载上一个或下一个项目。

这是我的代码所在。

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（向下滚动到＆＃34;工作＆＃34;部分 - 如果您打开项目然后关闭它，它可以单独加载每个项目，但是当我在上面使用相同的代码时＆＃34; prev＆＃34;＆＃34; next＆＃34;在项目弹出窗口内触发，它没有做任何事情）

非常感谢任何帮助！

Answer 1

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

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

Answer 2

尝试这样的事情

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

});

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

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

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

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

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

2 个答案: