How to auto apply drag and drop effect to dynamically added element ?

Question

I use jquery ui to apply a drag and drop effect on a serial of DIVs, for example:

<div class="draggable">...</div>
<div class="draggable">...</div>
<div class="draggable">...</div>
<div class="draggable"> this DIV was dynamically added, not draggable </div>

The problem is dynamically added DIVs won't have this effect applied, how can i apply this effect on new members too?

Answer 1

Have a look at the jQuery .live(). I believe you could use it here. If not - just attach .draggable() when you create your element.

Answer 2

You cannot use the .live() fuction with .draggable() directly, but you can use .live() with the mouseover event and re-attach .draggable() on mouseover like this.

$('.draggable').live('mouseover',function(){
    $(this).draggable();
});

Answer 3

You might also like to take a loot at the delegate() method introduced with jQuery 1.4 which is slightly better than live()

Here is an article comparing both approaches - http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/