jQuery砌體在ajax點擊後不起作用

我的ajax代碼有問題。我創建了一個DEMO從jsfiddle.netjQuery砌體在ajax點擊後不起作用

在這個演示中，你可以看到它的網格系統工作正常。但是當你點擊按鈕加載更多的帖子時，問題就會出現。

我的代碼有什麼問題？任何人都可以在這方面幫助我？

$(document).ready(function() { 
function loadMore() { 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px; background:blue;">6</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">7</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">8</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">9</div>'); 
    $('.posts-holder').append('<div class="kesif-gonderi-alani" style="height:300px;">10</div>'); 

    } 
    function ajax() { 
    // fake request 
    setTimeout(function(){ 
     loadMore(); 
     test(); 
    },1500); 
    } 
    $('.button').bind('click', function(e){ 
    e.preventDefault(); 
    ajax(); 

    }); 
    function test(){ 
    var $container = $(".posts-holder"); 
    $container.imagesLoaded(function() { 
    $container.masonry({ 
     columnWidth: ".kesif-gonderi-alani", 
     itemSelector: ".kesif-gonderi-alani" 
    }); 
    }); 
    } 
    test(); 
});

來源

2016-02-28 Azzo

你能說明你在哪裏使用ajax嗎？ – markoffden

@markoffden下去看看阿賈克斯代碼 – innovation

好吧，如果你調用你的函數ajax（）它並不意味着它會默認具有ajax功能 – markoffden

使用Masonryappend方法insted的jQuery的一個。我上傳了您的fiddle函數loadMore。

function loadMore() { 

    var $items = $('<div class="kesif-gonderi-alani" style="height:300px;">6</div><div class="kesif-gonderi-alani" style="height:300px;">7</div><div class="kesif-gonderi-alani" style="height:300px;">8</div><div class="kesif-gonderi-alani" style="height:300px;">9</div><div class="kesif-gonderi-alani" style="height:300px;">10</div>'); 

     $('.posts-holder').append($items) 
     // add and lay out newly appended items 
     .masonry('appended', $items); 
}

砌體的append方法需要一個jQuery對象。所以在你真正的ajax調用中，你將創建這些新對象，並將它們作爲參數在append方法中。

來源

2016-02-28 23:15:06

jQuery砌體在ajax點擊後不起作用

回答

相關問題