jQueryUI sortable re-binding on update

I have a <ul> tag that is "hardcoded" in my markup:

So, something like:

<ul id='myList'></ul>

and then I have this:开发者_Python百科

$(document).ready(function() {
//Some code
   $("#myList").sortable();
//Some more code
});

Now, my issue lies when I update the <ul> dynamically with a button click. The list in question gets generated by the user at runtime. So, when the page loads with some data in it (it's all stored in the database) the <li> objects are all listed properly and created as expected as .sortable(). Once I add a new entry, the entire list reverts to a list with bullet points showing, and no longer .sortable();. When the user enters data, the data is stored to the data and returned to the client via JSON (ie. no postback).

So, my question is, is there a way to re-bind the .sortable(); on the fly so that the list never falls back to a standard <li> element and will always be .sortable();?

I created a fiddle based on your code. Is there something I'm missing - I'm not seeing the behavior that you describe. I'm using jQuery 1.6.0 (since jsFiddle doesn't have an option for 1.6.1). But I'm using jQueryUI 1.8.13 (black tie theme, which doesn't really mean much :) ).

I didn't need to do a refresh on sortable - my list updates without reverting to a basic <UL>.

Let me know what I'm missing and I can further refine the fiddle.

Hope this helps.

EDIT: I made some changes to my fiddle based on your comment. It's not 100% the same, as jsFiddle only allows POSTs for JSON echo requests, but I think it's close. I still didn't have to do a sortable refresh; I just emptied the contents of the outer <UL> and then rebuild the <LI> elements.

Did you try .sortable('refresh')? http://docs.jquery.com/UI/Sortable#method-refresh