使用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內容 - 上一頁/下一頁

回答

相關問題