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

Question

我已整合了jquery＆＃34; sortable＆＃34;功能进入我的网站，它完美地与一个小异常。它仅在我在页面上的任何位置单击一次后才起作用。找到可排序元素的页面部分是在ajax查询之后加载的，因此我使用＆＃34; on＆＃34;功能。我想知道如何在不先点击的情况下让它工作。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

对于后来阅读本文的人来说，接受答案的关键是每次通过AJAX将HTML部分加载到文档中时加载JQuery代码部分，而不是在＆＃34; main＆＃34;第一次加载页面本身时加载的一段代码。

Answer 1

您不需要mousedown事件处理程序（此处已删除），因为这会导致仅在进行初始点击后（仅按照您自己的描述）添加

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;