How to bind a dynamic DIV to Jquery Masonry plugin?

Question

Hi,

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: false
            }
        });

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!

Answer 1

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();
});