用ajax加载内容后，jQuery-ui无法正常工作

Question

我正在使用jquery-ui对列表中的项目进行排序。 初次加载时我没有问题，因为它工作正常，但是在我转到其他页面并返回到列表所在的页面之后。 那是我遇到麻烦的时候了。

顺便说一句，我正在使用AJAX加载页面内容。 看来jquery-ui无法读取AJAX加载的内容。 我需要再次刷新页面，以使其正常运行。

我在here:创建了示例here:

我的HTML代码：

<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>

我的JS代码：

$( 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>');
  }

在我的示例中，第一次加载时没有问题。 但是，当您单击page2并返回到Page1时，排序功能将不起作用。

Answer 1

ISSUE

您正在重写html并使用#sortable创建新元素，也需要调用sortable $( "#sortable" ).sortable(); 在showPage1()内部

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>'
      );
      $( "#sortable" ).sortable();
  }

BEST APPROACH

更好的方法是检测#desp div中的更改并调用sortable()这样您就不必在其他每次再次填充可排序html的ajax调用中都手动调用它。

$('#desp').on("DOMSubtreeModified",function(){
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

在这里查看FIDDLE

或以下具有完整代码的演示

 $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); $('#desp').on("DOMSubtreeModified", function() { $("#sortable").sortable(); }); function showPage1() { $('#desp').html( '<ul id="sortable">' + '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 1</li>' + '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 2</li>' + '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 3</li>' + '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 4</li>' + '</ul>' ); /* $( "#sortable" ).sortable(); */ } function showPage2() { $('#desp').html('<h3>Page 2 here...<h3>'); } 

 #btnWrapper { margin: 0 0 10px 5px; } #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { background: grey; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } 

 <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> 

Answer 2

在这里尝试sortable()

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>'
  );
$( "#sortable" ).sortable();

}