I have the following static html:
<ul id="mylist">
<li id="li_10"><a href="10">Item 10</a></li>
<li id="li_20"><a href="20">Item 20</a></li>
<li id="li_30"><a href="30">Item 30</a></li>
<li id="li_40"><a href="40">Item 40</a></li>
<li id="li_50"><a href="50">Item 50</a></li>
</ul>
I have the following jQuery:
<script>
$( document ).ready( function() {
$("#mylist").sortable(
{axis:"y"}
);
});
</script>
This works perfectly, but stops working as soon as I use jQuery/AJAX to generate the above HTML. So I am assuming I need to use the "live" function in jQuery to do the sortable section. Can someone help me implement this?
.live()
is event based, so you can't use it for plugins like this. What you can easily do is call that code when your AJAX call finishes, for example:
$.ajax({
//options...
success: function(data) {
//create UL
$("#mylist").sortable({axis:"y"});
}
});
The same goes for short forms of $.ajax()
, for example:
$("#mylist").load("pageThatGivesTheLIElementGoodness.htm", function() {
$(this).sortable({axis:"y"});
})