jQuery UI draggable() and resizable()

Question

I want to write the draggable() and resizable() code in such a way that all future elements with a particular class will inherit those plugins without calling them again.

$('div.resizeMe').resizable({
containment: 'parent',
minWidth: 400,
minHeight: 200
})

When the above code is executed, all divs with resizeMe class inherits the resizable() function. But if I appended BODY with a new div with the same class, I needed to execute that code again. So my goal here is how to rewrite that code such that it will work for all and including future elements.

Answer 1

You can use the .livequery() plugin here, it will execute on current matches and execute on new elements as they appear, like this:

$('div.resizeMe').livequery(function() {
  $(this).resizable({
    containment: 'parent',
    minWidth: 400,
    minHeight: 200
  });
});

This will run on current and future div.resizeMe elements.

If you're using $.ajax() to load content, alternative is to run the code in your ajax success or complete callback, like this:

$.ajax({
  //options...
  success: function(data) {
    $('div.resizeMe', data).resizable({...options...});
  }
});

This would run on div.resizeMe elements only within the response and not on elements you've already made resizable.