使用 jquery 触发 .appendTo() 之前的空容器

Question

我有一个容器#boxes，我需要清空它并使用.imagesLoaded() 添加内容，然后应用砌体。默认情况下，内容包含我删除的砌体项目，然后添加响应中包含的新项目。我的代码的问题是它在我相信的附加之后清空了内容。有什么想法吗？

$(document).ready(function($){
    $('div.profile-archive').click(function(){
        $("#boxes").empty();
        $this = $(this);
        var postType = $this.attr("rel");
        data = {
          action: 'fetch_profile_archive',
              postType : postType
        };
        $.post(ajaxurl, data, function (response) {
            var $response = $(response);
            $response.imagesLoaded(function() {
              $("#boxes").masonry('reload');
            }).appendTo("#boxes");
        });
    });

});

Answer 1

我认为您的问题在于imagesloaded 函数。您目前将结果从imagesloaded 附加到boxes，我猜您首先将响应添加到boxes，然后在boxes 上运行imagesLoaded。

$("#boxes")
  .append($response)
  .hide() // If you don't want to show the content until loaded
  .imagesLoaded(function() {
    $("#boxes")
      .show() // If you want to show the content after it's loaded
      .masonry('reload');
  });