javascript - 砌体无法处理 ajax 响应

砌体在我的 ajax 响应中不起作用。我尝试过一些类似的方法，但对我不起作用。
我的代码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>

我想将 ajax 响应放在 id 中，并在响应上应用砌体。

最佳答案

将内容添加到 DOM 后，您需要重新初始化砌体。这就是砌体能够定位新添加元素的方式。

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

每次加载新内容后调用此方法。

关于javascript - 砌体无法处理 ajax 响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37043592/