javascript - Jquery Sortable 仅在第二次单击后触发

Question

我已经将 jquery“可排序”功能集成到我的网站中，除了一个小异常(exception)之外，它工作得很好。仅当我在页面上的任意位置单击一次后它才起作用。找到可排序元素的页面部分是在 ajax 查询后加载的，因此我使用“on”函数。我很想知道如何让它工作而不必先点击。

$(document).on("mousedown.sortable", "#container", function() {
  $("#container").sortable({
    update: function(event, ui) {
      var data = $(this).sortable("serialize");
      $.ajax({
        data: data,
        type: 'POST',
        url: 'myurl'
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
<div id="mainContainer">
  <ul id="container">
    <li id="item-1">Item 1</li>
    <li id="item-2">Item 2</li>
  </ul>
</div>

对于稍后阅读本文的任何人来说，接受答案的关键是每次通过 AJAX 将 HTML 部分加载到文档中时都加载 JQuery 代码部分，而不是在加载的“主”代码段中页面本身第一次加载时。

Answer 1

您不需要 mousedown 事件处理程序(此处已删除)，因为这会导致仅在您执行初始单击(如您自己所述)之后添加可排序

$("#container").sortable({
  update: function(event, ui) {
    var data = $(this).sortable("serialize");
    $.ajax({
      data: data,
      type: 'POST',
      url: 'myurl'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
<div>
  <ul id="container">
    <li id="item-1">Item 1</li>
    <li id="item-2">Item 2</li>
  </ul>
</div>