如何将动态DIV绑定到Jquery Masonry插件？

Question

我在HTML中有一些DIV，我使用AJAX动态加载它们。 $("#workPanel").load("ex.html");

同时，我还有一些静态链接，当点击它们时，会调用JQuery masonry来随机排列这些动态DIV。

            $('#filtering-nav li.1 a, li.2 a, li.3 a').click(function(){
               $('#primary').masonry();

                 return false;
              });

$('#primary').masonry({
            columnWidth: 100, 
            itemSelector: '.box:not(.invis)',
            animate: true,
            animationOptions: {
            duration: speed,
            queue: false
            }
        });

在页面第一次加载后，洗牌功能运行正常，但是当动态 DIV 更新后，洗牌就不再起作用了。我猜测需要在某个地方调用 live() 或 bind() 函数来解决这个问题，但我不知道应该在哪里进行绑定。 请帮帮我。 提前感谢！

- sgggh

Answer 1

这里是向瀑布流集合动态添加项目的示例： http://masonry.desandro.com/demos/adding-items.html 基本上，您需要调用“reload”瀑布流选项。

例如，在#holder div中插入jQuery项目“newElement”：

jQuery("#holder").prepend(newElement).masonry('reload')

- James P McGrath

---

我首先需要调用 masonry( 'reloadItems' )，然后再调用 masonry( 'layout' )。 - Ian Dunn

Answer 2

我认为这就是你想要的：

要再次运行砖石布局，你需要在.load()完成后进行一次洗牌，你可以通过将其作为回调函数来运行它，像这样：

$("#workPanel").load("ex.html", function() {
  $('#primary').masonry();
});

- Nick Craver

---

非常感谢您的答复。我不想在加载完成后运行砖石工具。我希望在再次单击链接时运行砖石工具。似乎动态 DIV 在 ajax 调用后未绑定到 DOM，因此砖石工具无法运行。 - sgggh

希望我表达清楚了，我的意思是砖石布局在页面第一次加载时就识别DIV。如您在代码中所见，我在某些链接被点击后运行砖石布局，而不是在DIV加载时运行。现在，当DIV被动态更新并再次点击链接时，砖石布局似乎没有运行，因为DOM已经更新并且未绑定。顺便说一下，#workPanel是一个包含另一个DIV #primary的容器DIV，该DIV通过AJAX进行更新。在单击链接时，会在#primary上调用砖石布局。谢谢！ - sgggh

Answer 3

你正在这样加载它：

$('#primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false
    }
});

好的，你已经定义了砖石布局选项。 现在，在此之后，让我们创建一个函数并绑定一些事件：

var masonryUpdate = function() {
    setTimeout(function() {
        $('#primary').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

永远不再担心它！

- Pedro Moreira