Problem using jquery UI droppable and livequery!

Question

I have this code for some elements to be dropped

var $tab_items = $("ul:first li",$tabs).droppable{ tolerance: 'touch' ,....

and it´s work ok, but the problem it´s when I load another button by ajax or by javascript, don´t work because the new element don´t have binding for this event.

In other similar situation I found a solution using livequery (event delegation), but here it´s imposibble because I don´t want to attach a function, I want to attach the same that on the first line code.

Any solution better than making dropabble after every new object load?

Answer 1

Just add the handler in your ajax success callback.

$.ajax({
   url: ...
   ...
   success: function(data) {
        $('<li>....</li>').droppable( { tolerance: 'touch', ... } )
                          .appendTo( '#tabs ul:first' );
        ...
   }
   ...
});

Answer 2

This might be a wrong hunch but you might want to look at: http://docs.jquery.com/UI/Sortable