开发者

How to bind a dynamic DIV to Jquery Masonry plugin?

I have some DIV's in my HTML that I load dynamically using AJAX.

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

I also have some static links that onclick, call the JQUery masonry to shuffle these dynamic DIV's..

            $('#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: fa开发者_如何学JAVAlse
            }
        });

The shuffling works fine after the first time the page loads, but when the dynamic DIV's are updated, the shuffling does not work anymore. I am guessing the live() or bind() function needs to be called somewhere, but I don't know how and where the binding needs to be done. Please help me out here.

Thanks in advance!


Here is an example of adding items dynamically to a masonry collection:

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

Basically, you need to call the "reload" masonry option.

For example to insert the jQuery item "newElement" into the #holder div:

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


I think this is what you're after:

To run masonry again you need to shuffle once the .load() completes, you can do this by running it as the callback function, like this:

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


You are loading it like:

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

Ok, so you've defined the masonry options. Now, right after that, let's create a function and bind some events:

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

Never worry about it again!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜