Question

I have a code like this one:

$('div.widgetDroppable').droppable({
    accept: 'li.widget',
 drop: function(event, ui) { 
     self.dropEventHandler(event, ui, $(this));
 }
});

I allow the user to add many of those widgetDroppable divs dinamically (through a code like $('#page').append(SOME_HTML_CODE)): the problem (which isn’t a real problem actually, but I don’t like it this way) is that if I put the previous code before any of the widgetDroppable divs has been created it won’t work, it seems like it doesn’t bind the ‘droppable’ thing to the divs because there’s no one of them at the moment. I had to put that code inside a method which is called anytime the user adds a div, but I’d like to avoid that. Is this possible?

Also, I don’t understand if this is a default behaviour in jQuery because I noticed that for other kind of divs the code is working anyway apparently even if they have not been created yet.

Answer 1

You could probably solve this by using livequery.

Your code would look something like this:

$('div.widgetDroppable').livequery(function(){
    $(this).droppable({
        accept: 'li.widget',
        drop: function(event, ui) { 
            self.dropEventHandler(event, ui, $(this));
        }
    });
});