[jQuery] dynamically inserted droppable

[Chris]

Hi,

I am relatively new to developing applications with both javascript
and the jquery framework. What I can't figure out is what to do if I
dynamically insert something on my page (imagine I click on a button
to create a new div-container) and that div should then automatically
become a droppable or something.

Right now, I have the following code loaded on the top of my site.
This is not working when I dynamically load the div but of course is
when I manually add that markup to the page.

$('.usergroup').droppable({
    accept: function(draggable) {
        // imagine certain logic that will return true
    },
    drop: function(event, ui) {
        // do something...
    }
});


$('#newgroup').live('click', function() {
    $('<div class="usergroup">new user group</div>').appendTo
('#container_usergroups').css('display', 'none').fadeIn('slow');
});

How can I make that div actually be droppable / whatever I want it to
be?

Thanks,
Christian