How to rearrange a set of html elements while preserving their click handlers? jQuery

I have a <ul> 开发者_运维技巧with number of <li>s each having its click handler being attached on page load. There is a button to sort these <li>s. In my sort functionality I have sorted the array of jQuery elements of <li>s and then appended them into the <ul>. this way the sorting works fine but all the <li> lose their click handlers. How do i preserve them ?

var li_array = $('ul li');
li_array.sort( custom_func );
ul.empty().append( li_array.clone(true, true) );

li_array.sort() should not work as li_array is not an array, but a jQuery object (unless you use a plugin). Update: It seems, jQuery does indeed provide a sort method and it is the same built-in function that arrays are using. This surprises me a little as I couldn't find anything in the document. Does someone has more information about this?

Furthermore, there is no need to clone the elements (which implies you don't have to empty the list). If you append existing DOM elements to another element, jQuery takes care to detach it first.

This should work (assuming ul references your list):

var li_array = $('ul li').get(); // li_array will be an array of **DOM elements**
li_array.sort( custom_func );
$(li_array).appendTo(ul); 
// or $(li_array).appendTo('ul'); or however you reference the list 

If you attach the same click handler to each <li> element, you better make use of event delegation, using .delegate():

$('ul').delegate('li', 'click', function() {
    // handler
}); 

More information about delegate:

Event delegation makes use of the fact, that events are bubbling up the DOM tree. The code above adds a click event listener to the ul element. The handler will be triggered for every click event that is raised on descendants of this element. Now, jQuery is smart and it executes the handler only for li elements (elements that match the selector, passed as first argument to delegate.

The advantage is that you don't add event handlers to every li element, but just one to their common ancestor.
You could also add more li elements to the list without adding the event listeners to them. The event handler bound to ul would also capture clicks on the newly added elements.

http://api.jquery.com/empty/

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

And in your code empty is called before clone

ul.empty().append( li_array.clone(true, true) );

Thus you may try next:

var new_li_array = li_array.clone(true, true);
ul.empty().append(new_li_array);

But reordering them with appendTo may be better.

Use the .live() for jQuery. This will preserve the li's click function when the li's are manipulated. To use

 $('ul li').live('click', function() {
    // function you want to execute
 });

you can use jquery`s appendTo function which moves the DOM element without affecting proprietary data(triggers and any other properties of the DOM elem) from the current parent (if any) to whatever elem is passed to the appendTo(element) function

James Padolsey has a really nice jQuery method for sorting elements