Добавление класса масонства в строку JQuery html

Question

Я пытаюсь найти и заменить данные html с помощью jquery. Сценарий jquery работает, в том, что он получает данные html из одного контейнера div и заменяет его новыми данными. Проблема заключается в перезагрузке, она дублирует класс контейнера и не добавляет класс кирпичной кладки, необходимый для вычисления следующих div.

Вот JQuery:

$("div.more a").on("click", function (event) { 
    event.preventDefault(); 
    // get the contents 
    $.get(this.href, function (response) { 
     // jquerify the response HTML string and find our replaceable area 
     var result = $(response).find('.l-home-grid'); 
     // do the replace 
     $('.l-home-grid').html(result); 
    }); 
    // Revert all to original state 
    $("a.active") 
    .removeClass("active") 
    .addClass("static"); 
    // Set classes to clicked anchor 
    $(this) 
    .removeClass("static") 
    .addClass("active"); 

    window.location.hash = $(this).text(); 
}); 

Который в результате HTML:

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; "> 
    <div class="mobile-padding l-home-grid"> 
    <div class="gridCells"><a href="#"> 
     <h4>Things</h4> 
     <img width="256" height="182" src="foo.jpg"> </a></div> 
    <div class="gridCells"><a href="#"> 
     <h4>More Things</h4> 
     <img width="256" height="182" src="foo.jpg"> </a></div> 
    <div class="gridCells"><a href="#"> 
     <h4>Objects</h4> 
     <img width="256" height="182" src="foo.jpg" > </a></div> 
    </div> 
</div> 

Почему

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; "> 
     <div class="mobile-padding l-home-grid"> 

загрузки дважды?

Цель заключается в следующем:

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; "> 
    <div class="gridCells masonry-brick"><a href="#"> 
     <h4>Things</h4> 
     <img width="256" height="182" src="foo.jpg"> </a></div> 
    ... 

Answer 1

Это происходит потому, что вы добавляете весь .l-home-grid элемент из вашего ответа в существующий .l-home-grid элемент. Измените эту строку:

var result = $(response).find('.l-home-grid'); 

к этому:

var result = $(response).find('.l-home-grid').html(); 

для того, чтобы просто добавить содержимое ответа в контейнер. Возможно, вам необходимо будет позвонить

$('.l-home-grid').masonry('reload'); 

после того, как вы загрузите новый контент, чтобы убедиться, что он получает масонство.