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创建新元素，您需要在$( "#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()，这样您就不必每次在每个其他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

尝试function showPage1(){ $('#desp').html( '<ul id="sortable">'+ '<li class="ui-state-default">Item 1</li>'+ '<li class="ui-state-default">Item 2</li>'+ '<li class="ui-state-default">Item 3</li>'+ '<li class="ui-state-default">Item 4</li>'+ '</ul>' ); $( "#sortable" ).sortable(); }此处

function TanggalIndo($date) {
    $BulanIndo = array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
    $tahun  = substr($date, 0, 4);
    $bulan  = substr($date, 5, 2);
    $tgl    = substr($date, 8, 2);

    $result = $tgl . " " . $BulanIndo[(int) $bulan - 1] . " " . $tahun;
    return($result);
}

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

2 个答案:

`ISSUE`

`BEST APPROACH`