jQuery using Sortable with dynamically added elements (live refresh)

Pinkie picture Pinkie · Mar 29, 2011 · Viewed 23.1k times · Source

I have a <form id="#form"> that have a <span class="con"> and inside the span i have many divs that needs to be sortable.

<form id="form">
    <span class="con">
        <div class="ui-state-highlight">Item 1</div>
        <div class="ui-state-highlight">Item 2</div>
        ... 
    </span>
</form>

I'm using the sortable function to make div Sortable.

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

I'm dynamically adding with divs inside. But sortable is not recognizing newly added spans. I know there's a refresh option for sortable that is supposed to work like live() and reognize newly added content, but i don't see how i can use it with this example.

Check http://jsfiddle.net/mRyVp/8/. Click on the button to add more spans with divs inside. You will see that you can sort div that were initially in DOM but not newly added ones.

Answer

Santosh Linkha picture Santosh Linkha · Mar 29, 2011

It seems that you have class="connectedSortable" in

<span class="connectedSortable">
    <div class="ui-state-highlight">Item 1</div>
    <div class="ui-state-highlight">Item 2</div>
    ... 
</span>

And connectWith: ".con" in

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Adding con class to original div will just be fine. Update here.