JQuery UI не Сортируемый работы с HTML данных Ajax

Question

Я новичок в JQuery, и по какой-то причине мой сортируется список не работает с sortable

Я просто практикуя

мой код

$(".sortable").sortable(); 

$.ajax({ 
     url: baseUrl+'/loadFields/, 
     dataType: "html", 
     success: function(data) 
     { 
     $('#fields').html(data); 
     } 
    }); 

ДИВ, где данные загружаются

<div id="fields"></div> 

и файл HTML, где список содержится

<ul class="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> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul> 

И когда я стараюсь не таскать ничего не происходит, если я не загружать HTML с помощью AJAX и сделать это так

<div id="fields"> 
<ul class="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> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul> 
</div> 

он работает отлично

Может понравиться кто-нибудь скажет мне, как использовать его с данными ajax?

Answer 1

HTML

<div id="fields"> 
<ul class="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> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul> 
</div> 

CSS

.ui-icon {float:left;margin-right:8px;} 

JQuery

$(".sortable").sortable("refresh"); // add this line to "re-load" the sortable list after populating 
$(".sortable").ready(function() { 
    $(".sortable").sortable(
     { 
      handle: '.ui-icon-arrowthick-2-n-s', 
      items: 'li', 
      containment: '#fields', 
      forceHelperSize: true, 
      forcePlaceHolderSize: true, 
      start: function(e, ui) { 
       ui.item.addClass('ui-state-highlight'); 
      }, 
      stop: function(e, ui) { 
       ui.item.removeClass('ui-state-highlight').effect('highlight',{},2000);; 
      }, 
      update: function() { 
       $('.sortable').sortable('refreshPositions'); 
      } 
     } 
); 
}); 

Working jsFiddle