Question

我刚刚重构了我的一段代码，发现了一个可排序的列表，用于排序精细的不再排序。 Javascript/JQuery代码如下：

function makeSortable() { 
    $(document).ready(function() {
      $( ".sortable" ).sortable();
      $( ".sortable" ).disableSelection();
      console.log("sort function started");
    });
  };

调用它的Javascript如下所示：

var UrlString = "http://orderofthemouse.co.uk/templates/menu/Formation.html";
loadDoc(UrlString);
makeSortable();

HTML模板如下所示：

<h1>Formation</h1>
<h2>Drag characters to change positions</h2>
<ol class='sortable' id='charlist'>
  <li>
    <h3 class='charname'>Dragon-Bear</h3>
  </li>
  <li>
    <h3 class='charname'>Deer-Wolf</h3>
  </li>
</ol>

LoadDoc()函数运行如下：

function loadDoc(UrlString) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("storybox").innerHTML = xhttp.responseText;
    }
  };
  console.log("URL = " + UrlString);
  xhttp.open("GET", UrlString, true);
  xhttp.send();
}

程序肯定会在＆＃34;排序功能启动后进入功能＆＃34;语句被记录到控制台......

Answer 1

您的loadDoc听起来是异步的，这意味着您不会等到内容加载完毕。因此，您尝试将事件附加到不存在的元素。您需要在添加内容后执行此操作。

简单的console.log("sort function started", "length:", $( ".sortable" ).length);将确认是这种情况。

可排序列表不会排序（jQuery / Javascript）

1 个答案: