Additional divs with Ajax JSON do not take style

0

I'm having a problem, I made a programming of portfolios blocks where when I press on loads more my ajax creates the other blocks of the database. However it is not pulling the style that the blocks that are already in the html have, which would be the absolute position and the top and left to stand side by side. To do these style and animations I use ISOTOPE.

CODE:

 <script type="text/javascript">
var loadedImageCount, imageCount;
$(function() {

    // GRID
    var $container = $('.grid');
    $container.imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });

    // filter functions
    var filterFns = {
        // show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt(number, 10) > 50;
        },
        // show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };


    // bind filter button click
    $('.filters-button-group').on('click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[filterValue] || filterValue;
        $container.isotope({
            filter: filterValue
        });

    });
    // change is-checked class on buttons 
    $('.button-group').each(function(i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });

    var loadedImageCount, imageCount;
    $('#add').click(function() {
        // add new images
        var items = getItems(function(html) {
            $container.prepend($(html));
        });

        // use ImagesLoaded
        $container.imagesLoaded()
            .progress(onProgress)
            .always(onAlways);

    });

});
// ----- ----- //

// return doc fragment with
function getItems(callback, items, contador) {
    if (!items) items = '';
    if (typeof contador == 'undefined') contador = 6;
    _getImageItem(function(html) {
        items += html;
        contador--;
        if (contador == 0) callback(items);
        else getItems(callback, items, contador);
    });

}



// return an <li> with a <img> in it
function _getImageItem(_callback) {
    var item = "";
    jQuery.ajax({
        url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
        dataType: "json", //Tipo de Retorno
        success: function(data) {
            var pt1 = data.map(function(obj) {
                return '<div class="element-item ' + obj.menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + obj.imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + obj.tipo + '"</h1><h2>"' + obj.nome + '"</h2></div></a></div></div></div>';
            }).join('');
            _callback(pt1); // <- aqui envias de volta para a callback da chamada da função
        }
    });
}



// triggered after each item is loaded
function onProgress(imgLoad, image) {
    // change class if the image is loaded or broken
    var $item = $(image.img).parent();
    $item.removeClass('is-loading');
    if (!image.isLoaded) {
        $item.addClass('is-broken');
    }
    // update progress element
    loadedImageCount++;
}

// hide status when done
function onAlways() {}

        </script>
    
asked by anonymous 08.01.2016 / 19:17

0 answers