Question

I’m using jquery-ui tabs(). Evertihng worked fine.
Then I reordered my tabs in DOM via jquery.

Before:

<li id="L1">Tab 1</li>
<li id="L2">Tab 2</li>

After:

<li id="L2">Tab 2</li>
<li id="L1">Tab 1</li>

When i hover my tabs they show correct links to the content-divs.
But by clicking the tabs nothing is happening.

Anyone has an idea whats my fault?

EDIT: My code for reordering li-elements:

$(document).ready(function() {
  var elems = $('#tabsUl').children('li').remove();

  elems.sort(function(a,b){
    return parseInt($(a).attr("data-order")) > parseInt($(b).attr("data-order"));
  });

  $('#tabsUl').append(elems);
});​

And the markup example:

<ul id="tabsUl">
  <li data-order="4">Item 4</li>
  <li data-order="2">Item 2</li>
  <li data-order="3">Item 3</li>
  <li data-order="1">Item 1</li>
</ul>

Answer 1

Use .detach() instead of .remove().

var elems = $('#tabsUl').children('li').detach();

Documentation:

.detach()

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.