Drag and drop not working after i used append function

Question

Ok lets" start i have static Drag and drop that look like this http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

and this is code

<ul id="test" class="ui-droppable">
                    <li class="ui-draggable">iPhone</li>
                    <li class="ui-draggable">iPod</li>
                    <li class="ui-draggable">iPad</li>
                </ul>

i added Ajax that put more items inside and added them to div test dynamic and this code i used

for (var i = 0; i < maps.length; i++)
    {
        $('#test').append(' <li class="ui-draggable">' + maps[i].referenceid + '</li>');
    }

and this what i got

<ul id="test" class="ui-droppable">
<li class="ui-draggable">iPhone</li>
<li class="ui-draggable">iPod</li>
<li class="ui-draggable">iPad</li>
<li class="ui-draggable">14k Gold Hebrew Name Necklace</li>
<li class="ui-draggable">Double Thickness Hebrew Name Necklace</li>
<li class="ui-draggable">Elegant Sterling Silver & 14k Gold Comfort Fit Engraved Wedding Band</li>
</ul>

i see all new elements BUT i can drag only the three first that was before i can"t drag the new one that i build with Ajax function. Can any one help my with this problem?

Answer 1

I find the problem you just need to add drag event to new objects this is the code

    for (var i = 0; i < maps.length; i++)
{console.log("maps[i].referenceid ---->",maps[i].referenceid );
    $('#test').append('<li class="ui-draggable">' + maps[i].referenceid + '</li>');
    This is new solution--->$('.ui-draggable').draggable();


}