javascript - 无法用同位素填充数据

Question

我正在尝试通过 ajax 调用将数据动态添加到使用 Isotope 插件的无序列表中。

尽管函数调用成功，但我无法将数据添加到此列表中。你能告诉我我哪里出错了吗？

HTML：

<ul class="media-list">
    <li class="magazines online teens">
        <a href="#">
            <img src="/Content/img/media-logos/vi-unge.jpg" class="img-responsive">
            <h4 class="first">Vi Unge</h4>
            <p class="description">For unge</p>
            <div class="indicator indicator-green">1</div>
        </a>
    </li>
</ul>

JS文件：

function initIsotope() {
    $.ajax({
        type: "POST",
        url: "About.aspx/getMedia1",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // Do something interesting here.
            $.each(data.d, function (i, m) {
                //alert("Data " + i + "|" + item.StringName);
                $newItem =      $('<li class="' + m.ClassName + '"></li>').html('<a href="' + m.url + '"> <img  src="' + m.LogoPath + '" class="img-responsive" />'
  + '<h4 class="' + m.H4Class + '">' + m.MediaName + '</h4> <p class = "' + m.descriptionClass + '">' + m.Description + '<p><div class = "' + m.indicatorClass + '">' + 1 + '" </div></a></li>').appendTo('#container');

                $('.media-list').isotope('insert', $newItem);
            });
        }
    })
}

$(window).load(function(){
    $(function(){
        initIsotope();
        var $container = $('.media-list');
        filters = {};

        $container.isotope({
            itemSelector : 'li',
            getSortData : {
                title : function ( $elem ) {
                    return $elem.find('h4').text();
                },
                relevance : function ( $elem ) {
                    return $elem.find('.indicator').text();
                }
            }
        });

        $('.filter-set button').click(function(){
            var $this = $(this);
            if ( $this.hasClass('active') ) {
                return;
            }

            var $optionSet = $this.parents('.filter-set');
            optionSet.find('.active').removeClass('active');

            $this.addClass('active');

            if($optionSet.data('filter-group') == 'sort-by'){
                var sortBy = $this.data('sort-value');
                $container.isotope({ sortBy : sortBy });
            } else {
                var group = $optionSet.data('filter-group');
                filters[ group ] = $this.data('filter-value');

                var isoFilters = [];
                for ( var prop in filters ) {
                    isoFilters.push( filters[ prop ] )
                }

                var selector = isoFilters.join('');

                $container.isotope({ filter: selector });

                detectEmpty();
            }
            return false;
        });

        // $select = $('select.filter-set');
        // $select.change(function() {
        //     var $this = $(this);
        //     var $optionSet = $this;
        //     var group = $optionSet.data('filter-group');
        //     var isoFilters = [];
        //     filters[group] = $this.find('option:selected').each(function(){
        //       isoFilters.push( $(this).data('filter-value') );
        //     });
        //     var selector = isoFilters.join(', ');
        //     $container.isotope({
        //         filter: selector
        //     });
        //     detectEmpty();
        //     return false;
        // });

        function detectEmpty(){
            if ( !$container.data('isotope').$filteredAtoms.length ) {
                $container.addClass('no-results');
            } else {
                $container.removeClass('no-results');
            }

            if ( $('.media-list-selected li').length == 0 ) {
                $('.media-list-selected').addClass('no-results');
            } else {
                $('.media-list-selected').removeClass('no-results');
            }
        }

        $container.on('click', 'li', function(e){
            var closeButtonHtml = '<button type="button" class="close" aria-hidden="true">&times;</button>',
            mediaItem = $(this).removeAttr('style').prepend(closeButtonHtml).clone().wrap('<div>').parent().html();
            $container.isotope('remove', $(this));
            $('.media-list-selected').append(mediaItem);
            e.preventDefault();
            updateSelectedMedia();
            detectEmpty();
        });

        function updateSelectedMedia(){
            $('.media-list-selected li .close').unbind().on('click', function(e){
                var newEls = $(this).parent();
                $(this).remove();
                newEls.clone().wrap('<div>').parent().html();
                $container.isotope('insert', $(newEls));
                $(this).parent().remove();
                e.preventDefault();
                detectEmpty();
            });
        }
    });
});

Answer 1

终于设法弄清楚：必须将异步调用更改为同步调用，然后它才起作用