Каменная кладка не работает на ответ ajax

Question

Каменная кладка, не работающая в моем ответе ajax.i, пробовала что-то вроде этого, но оно не работает для меня. мой код код Ajax является:

<script> 
function loadmore(cnt) 
    { 
     var val = document.getElementById("result_no").value; 
     $.ajax({ 
      type: 'get', 
      url: '{{ URL::route('oi_array3') }}', 
      data: { 
      last:val,cnt 
      }, 
      success: function (response) { 
       var content = document.getElementById("uf"); 
       if (response == '') { 
        $("#load").hide(); 
       } 

       ` response.forEach(function(value){ 
        var d = new Date(value.timestamp); 
        var n = d.toDateString(); 
        var s = d.toLocaleTimeString(); 

        content.innerHTML += '<div class="grid-item oi_data_tile">' + 
        '<div class="small-12 text-right timestamp columns">' + n + ' ' + s + '</div>' + 
        '<label class="small-6 columns">Underlying Index</label>' + 
        '<label class="small-6 text-right nifty_index columns">' + 
        '<strong>' + value.underlying_index + '</strong>' + 
        '</label>' + 
        '<label class="small-6 columns">Diff. in change in OI</label>' + 
        '<label class="small-6 text-right nifty_index columns">' + 
        '<strong>' + value.diff_in_change_in_oi + '</strong></label>' + 

        '<div class="small-12 columns">'+ 
         '<table class="small-12 columns">'+ 
          '<tr class="header">' + 
           '<td class="small-3">Chng in OI Call</td>' + 
           '<td class="small-3">Strike<br>price</td>' + 
           '<td class="small-3">Chng in OI Put</td>' + 
           '<td class="small-3">Diff in Chng in OI</td>' + 
          '</tr>'+  

          '<tr>' + 
           '<td class="text-right">' + value.derivatives[0].change_in_oi_call + '</td>' + 
           '<td class="text-right">' + value.derivatives[0].strike_price + '</td>' + 
           '<td class="text-right">' + value.derivatives[0].change_in_oi_put + '</td>' + 
           '<td class="text-right bullish">' + value.derivatives[0].diff_in_change_in_oi + '</td>' + 

          '</tr>' + 

          '<tr>' + 
           '<td class="text-right">' + value.derivatives[1].change_in_oi_call + '</td>' + 
           '<td class="text-right">' + value.derivatives[1].strike_price + '</td>' + 
           '<td class="text-right">' + value.derivatives[1].change_in_oi_put + '</td>' + 
           '<td class="text-right bullish">' + value.derivatives[1].diff_in_change_in_oi + '</td>' + 

          '</tr>' + 

          '<tr>' + 
           '<td class="text-right">' + value.derivatives[2].change_in_oi_call + '</td>' + 
           '<td class="text-right">' + value.derivatives[2].strike_price + '</td>' + 
           '<td class="text-right">' + value.derivatives[2].change_in_oi_put + '</td>' + 
           '<td class="text-right bearish">' + value.derivatives[2].diff_in_change_in_oi + '</td>' + 

          '</tr>' + 

         '</table>' + 
        '</div>'+ 
        '</div>' 
        if(document.getElementById("result_no").value == '0') 
         document.getElementById("latestvalue").value = value.timestamp; 

        document.getElementById("result_no").value = value.timestamp; 



       }); 
      }//response close 
     });//ajax close 
    }//loadmore close 

    $('.grid').masonry({ 
     columnWidth : 320, 
     gutter: 15, 
     percentPosition: false, 
     fitWidth: true, 
     isFitWidth: true, 
     itemSelector: '.grid-item' 
    }); 

    $('.grid').imagesLoaded(function() { 
     $('.grid').masonry('layout'); 
    }); 

</script> 

и Html код:

<div class="small-12 columns" id="uf1"> 
    <div class="grid" id="uf"> 
    <!-- ajax response is added here.--> 

    </div> 
    <input type="hidden" id="result_no" value="0"> 
</div> 

Я хочу поставить АЯКС ответ на идентификатор, и применять кладку на ответ.

Answer 1

Вам необходимо повторно инициализировать кладку после добавления содержимого в DOM. Это способ, с помощью которого кладка сможет ориентироваться на вновь добавленный элемент.

$('.grid').masonry(); 

Звоните сюда, после того как новый контент будет загружен каждый раз.