jquery - 使用 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然后imagesLoaded运行boxes。

$("#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');
  });