jQuery UI draggable() and resizable()

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.

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.