[jQuery] Sortable on dynamic content - how to?
Hello,
I have a list with sortable elements "<li>" using the Interface
plugins. This works fine. But when I add a new element with ".append"
the new element is not draggable. I am quite new to jquery and am
using Live Query on other dynamic elements. How would I write this
function to make every dynamic element also sortable i.ex. using
livequery? I can bind an event to new elements but how do you bind a
function to new elements? Is "Sortable" an event or a function? Just
trying to learn :-)
Here is the code:
<span id="additem">New item</span>
<ul class="items">
<li class="sortableitem">Item 1</li>
<li class="sortableitem">Item 2</li>
<li class="sortableitem">Item 3</li>
<li class="sortableitem">Item 4</li>
</ul>
<script type="text/javascript">
$(document).ready(
function () {
$('ul').Sortable(
{
accept : 'sortableitem',
helperclass : 'sorthelper',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
opacity: 0.8,
fx: 200,
axis: 'vertically',
opacity: 0.4,
revert: true
}
)
}
);
$("#additem").click(function(){
$('ul.items').append('<li class="sortableitem">New item</li>');
});
</script>