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

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

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

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() 这样您就不必每次都手动调用它 ajax再次调用您要填充可排序 html 的位置。

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

}

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

Jquery-ui not working after loading content with ajax

javascript

ajax

jquery

jquery-ui-sortable

`ISSUE`

`BEST APPROACH`