Event delegation with UI sortables, attn. Karl Swedberg ;)
Karl's excellent website, www.learningjquery.com, has helped me no end
in recent days - thanks Karl! But I can't get the technique described
in his recent article on 'working with events' to work in a different
context - this one being UI sortables.
Here's a page containing some sample code I'm having problems with:
http://www.rymix.co.uk/jquery/d13/sortables3.html
Basically, #column contains divs with the class .portlet. I have a
script which prepends .portlet divs into #column, but they aren't
immediately sortable due to the reasons described by Karl here:
http://www.learningjquery.com/2008/03/working-with-events-part-1
I suspect I need to wrap up the following sortable code in some sort
of event container, but I'm not wise enough to figure it out.
Here's the original code, non-event-delegated:
$(document).ready(
function()
{
$('#column').sortable();
$('#addportlet').click(function()
{
$('#column').prepend('<div class="portlet dynamic">A dynamic
portlet. Try dragging me. Doesn\'t work? Drag one of the orange
portlets, then try dragging me again.
</div>');
}
);
}
);
<a href="#" id="addportlet">Add a dynamic portlet</a>
<div id="column">
<div class="portlet">
This is a hard-coded sortable portlet. Drag me.
</div>
<div class="portlet">
Another hard-coded portlet. Drag me too.
</div>
</div>
Thanks for your help,
Steve