I'm using `jquery-ui` to sort the items on my list. At first load I have no problem coz it works fine but after I go to other page and go back to the page where my list is. That's the time I'm having trouble. 

By the way, I'm using AJAX to load the content of my pages. And it seems that `jquery-ui` can't read the content that was loaded by AJAX. I need to refresh the page again so that it will work fine.

I created sample [**`here:`**](https://jsfiddle.net/junscrapers/3x4cpau4/)

My HTML Code:

```
<div id="btnWrapper">
    <button onclick="showPage1();">Page 1</button>
    <button onclick="showPage2();">Page 2</button>
</div>

 <div id="desp">
 <ul id="sortable">
  <li><span></span>Item 1</li>
  <li><span></span>Item 2</li>
  <li><span></span>Item 3</li>
  <li><span></span>Item 4</li>
</ul>
 </div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

```

My JS Code:

```
$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

  function showPage1(){
    $('#desp').html(
        '<ul id="sortable">'+
          '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>'+
          '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>'+
          '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>'+
          '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>'+
        '</ul>'
      );
  }

    function showPage2(){
    $('#desp').html('<h3>Page 2 here...<h3>');
  }

```

In my example, at first load, no problem. But as you click page2 and go back to Page1, sort function will not work.