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!
精彩评论