Erneute Anwendung von JavaScript nach dem Laden

Question

Ich habe ein Problem mit meinem Mauerwerk Code.

Es funktioniert gut bei Saumload, aber die Elemente, die in der Mauer sind, können gefiltert werden, ich mache dies mit Ajax und ich ersetze das gesamte div mit Elementen, um die gefilterten Elemente zu zeigen.

Danach wird der Mauercode nicht mehr angewendet und er fällt auseinander.

Wie kann ich sicherstellen, dass das Mauerwerk auch dann beibehalten wird, wenn sich der Inhalt nach dem Laden ändert?

In meiner Fußzeile habe ich den folgenden Code:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.gridlist').isotope({ 
     itemSelector: '.masonryitem', 
     layoutMode: 'masonry', 
     }); 
    }); 
</script> 

Da ist in meinem custom.js ich habe folgendes:

$(document).ready(function() { 

    /* Ajax code voor aanbiedingen */ 
    $("#branche").on('change', function() { 
    var option = $('#branche > option').filter(':selected'); 

    if(option.val() == 'default'){ 
     $.post("includes/ledenall.php", { 
     filter: option.val() 
     }, function(result){ 
     $("#content1").html(result); 

     }); 
    }else{ 
     $.post("includes/leden.php?option=" + option.val(), { 
     filter: option.val() 
     }, function(result){ 
     $("#content1").html(result); 
     }); 
    } 
    }); 
}); 

Welche meine PHP-Datei zurück, aber diesmal ohne das Mauerwerk wird benutzt.

Was kann ich dagegen tun?

Answer 1

können Sie versuchen, Ihre Isotop Bibliothek erneute Anwendung nach dem DOM zu ändern:

/* Ajax code voor aanbiedingen */ 
$("#branche").on('change', function() { 
    var option = $('#branche > option').filter(':selected'); 

    if(option.val() == 'default'){ 
    $.post("includes/ledenall.php", { 
     filter: option.val() 
    }, function(result){ 
     $("#content1").html(result); 
     $('.gridlist').isotope({ 
     itemSelector: '.masonryitem', 
     layoutMode: 'masonry', 
     }); 
    }); 
    }else{ 
    $.post("includes/leden.php?option=" + option.val(), { 
     filter: option.val() 
    }, function(result){ 
     $("#content1").html(result); 
     $('.gridlist').isotope({ 
     itemSelector: '.masonryitem', 
     layoutMode: 'masonry', 
     }); 
    }); 
    } 
}); 

Ich weiß nicht, ob .gridlist völlig in Ihrem aktualisierten DOM ersetzt wird. Wenn nicht, müssen Sie möglicherweise die alte Isotopeninstanz irgendwie "entfernen", aber etwas Ähnliches ist, was Sie tun müssen.

Answer 2

Fügen Sie Ihren Code in eine Funktion

function func() { 
    $('.gridlist').isotope({ 
     itemSelector: '.masonryitem', 
     layoutMode: 'masonry', 
    }); 
} 

Dann können Sie die Funktion aufrufen und übernehmen Sie Isotop an einer beliebigen Stelle Sie wollen