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

我在我的HTML中使用AJAX动态加载一些DIV。如何将动态DIV绑定到Jquery Masonry插件？

$("#workPanel").load("ex.html");

我也有一些静态链接，的onclick，调用jQuery的砖石洗牌这些动态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（）函数需要在某个地方调用，但我不知道如何以及在何处绑定需要完成。请帮我看看这里。

在此先感谢！

来源

2010-08-19 user425730

我认为这是你追求的：

要再次运行砖石需要洗牌一旦.load()完成后，您可以通过运行它的回调函数，这样做：

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

来源

2010-08-19 21:40:33

非常感谢您的回答。一旦加载完成，我不想运行砌体。当链接再次点击时，我希望砌体运行。在ajax调用和砌体不运行之后，似乎动态DIV没有被绑定到DOM。 – user425730 2010-08-20 03:59:24

我希望我已经清楚了，我的意思是砖石首次识别页面加载时的DIV。正如你在代码中看到的那样，当点击某个链接时，我运行砌体，而不是在DIV加载时运行。现在，当动态更新DIV，并且链接被再次单击时，由于DOM被更新并且没有被绑定，所以砌体似乎不运行。顺便说一句，#workPanel是一个容器DIV，它具有另一个用AJAX更新的DIV #primary。单击链接时，砌体将在#primary上调用。谢谢！ – user425730 2010-08-20 04:08:07

下面是动态添加项砖石集合的例子：

http://masonry.desandro.com/demos/adding-items.html

基本上，您需要调用“重新加载”石工选项。

例如插入了jQuery项目 “为newElement” 到#holder格：

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

来源

2012-08-10 04:46:06

我必须先调用'masonry（'reloadItems'）'，然后'砌体（'layout'）' – 2013-09-13 06:08:35

您正在加载它想：

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

再也不用担心了！

来源

2014-04-15 13:18:30

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

回答

相关问题