jQuery quicksand plugin with .click method

Question

I'm attempting to add this .click function to each image I'm sorting with the quicksand plugin for jQuery

$('li img').click(function() {

    var verticalCenter = ($(window).height() - $('#popupContent').height() ) /2;
    var horizontalCenter = ($(window).width() - $('#popupContent').width() ) /2;

    $('#popupContent').css('top', verticalCenter);
    $('#popupContent').css('left', horizontalCenter);
    $('#backgroundPopup').fadeIn('slow');
    $('#popupContent').fadeIn('slow'); 

});

It will create the popup properly but after sorting it will stop working. The documentation suggests...

"When your items have functional enhancements (eg. tooltips), remember to use callback to apply them on newly cloned objects:

$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
  }, function() { // callback function
    $('#content a').tooltip();
  }
);

I'm not sure where to put this code and change it to work for my case, please help.

Answer 1

Instead of .click use .live('click',function(){}); This will re-bind to the event as they're being moved/cloned throughout the DOM (as long as your selector doesn't change).