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

所以我想要做的是将内容从HTML文档添加到我已经使用AJAX将内容加载到（从同一文件）到DIV的DIV中。使用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（向下滚动到 “工作” 部分 - 它的工作原理加载每个如果您打开一个项目然后关闭它，但是当我在项目弹出窗口中的“prev”和“next”触发器上面使用相同的代码时，它不会执行任何操作）

任何帮助，非常感谢！

来源

2014-12-06 Kevin Haag

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

来源

2014-12-06 05:37:44 Dave

我想我知道你的意思是“在页面加载”，但你能解释“ajax complete call？”吗？我是一个超级noob AJAX – 2014-12-07 18:23:30

行..我看到一个EXPLORE PROJECT按钮。当我从萤火虫控制台注入此代码并单击下一个按钮时，它显示加载图像，然后显示具有项目详细信息的div。这是ajax调用位置GET http://the.gs/testlink/kevin/includes/projects.html。找到这个ajax调用和它的完整。重新绑定事件以使上一个和下一个按钮工作。这里是如何找到ajax成功电话的答案http://stackoverflow.com/questions/21648356/jquery-ajax-beforesend-and-success-error-complete – Dave 2014-12-07 18:31:45

好吧，这指出我在正确的方向。我结束了使用.ajaxComplete（）[链接]（http://api.jquery.com/ajaxcomplete/）并使用您在上面建议的代码中调用。 '; $（document）.ajaxComplete（function（）{ // Dave's code here ）};' – 2014-12-08 06:12:06

尝试这样

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

});

原因：.p-load元件被加载动态中不存在对DOM负载。所以使用jquery委托

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

我宁愿使用模态，其是存在于DOM负载的父elment。所以我认为你的情况是.p-modal

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

来源

2014-12-06 05:34:19

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

回答

相关问题