使用ajax加载内容后Jquery-ui无法正常工作

Question

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

顺便说一下，我正在使用 AJAX 来加载我的页面内容。而且似乎jquery-ui 无法读取AJAX 加载的内容。我需要再次刷新页面才能正常工作。

我创建了示例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>');
  }

在我的示例中，第一次加载没有问题。但是当你点击第2页并返回第1页时，排序功能将不起作用。

Answer 1

ISSUE

您正在覆盖 html 并使用 #sortable 创建一个新元素，您还需要在 showPage1() 中调用 sortable $( "#sortable" ).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();
  }

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-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(); */
}

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();

}