javascript - 使用 AJAX 删除项目后未触发 .ajaxComplete？

Question

我正在使用 Rails 4、Bootstrap 和 Masonry。我有以下代码用于 jQuery Masonry 来排列我的 div，在 application.js 中:

$(function(){
  $('#pins').masonry({
    itemSelector: '.box',
    isFitWidth: true
  });
});

var masonryUpdate = function() {
    setTimeout(function() {
        $('#pins').masonry();
    }, 200);
}

$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

它以其他方式工作，但是当我尝试使用 AJAX 删除项目时，Masonry 不会更新。这是我的 destroy.js:

$('.deleting').bind('ajax:success', function() {  
    $(this).closest('.poista').fadeOut();
});

在上面的代码示例之后，如何强制 Masonry 重新加载？由于某种原因 .ajaxComplete(masonryUpdate) 未触发？

Answer 1

来自 jQuery Documentation在 ajaxComplete 上，它似乎不对给定参数执行函数调用，而是在 Ajax 请求完成时调用处理函数。

handler Type: Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions ) The function to be invoked.

最好的选择是使用匿名函数来调用masonryUpdate。

$(document).ajaxComplete(function(event, xhr, settings) {
  masonryUpdate();
};

编辑

最好将砌体规范缓存在变量中。

var mas = $('#pins').masonry({
    itemSelector: '.box',
    isFitWidth: true
});

然后你可以在该变量上调用 masonry

var masonryUpdate = function() {
  setTimeout(function() {
    mas.masonry('reload');
  }, 200);
}