Creating dynamic DIV breaks JQuery-UI Droppable - jquery-ui

Question

I have a draggable element and a div with two static drop zones:
<img id="dragimage" src="_images/image.png" >
<div class="lines">
<div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
<div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
</div>
<script>
$(function () {
$("#dragimage").draggable();
$(".dropzone").droppable({
drop: function(event,ui){
alert('dropped');
}
});
</script>
I have a button that dynamically adds additional drop zones. I add the "ui-droppable" class to the dynamic drop zones since calling .droppable() adds that class automatically to any static droppable elements.
function AddLine()
{
var linecount = $("#linecount").val();
var linediv = $(".lines").html();
linecount++;
$("#linecount").val(linecount);
linediv += '<div class="dropzone ui-droppable " style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>';
$(".lines").html(linediv);
}
When I drop the draggable element into one of the static drop zones prior to adding any dynamic drop zones, I get the alert every time with no difficulties.
When I add one or more dynamic drop zones, the drop event never fires again, even for the original static drop zones.
Any suggestions?

Answer 1

I figured it out with the help of This
The AddLine method above is now this:
function AddLine()
{
var linecount = $("#linecount").val();
var linediv = $(".lines").html();
linecount++;
$("#linecount").val(linecount);
var newline = $('<div class="dropzone ui-droppable" class="ui-droppable" style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>').appendTo(".lines");
newline.droppable( {
drop: function(event,ui)
{
alert('dropped'+linecount);
}
});
}