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

Question

我已经将jquery的“可排序”功能集成到我的网站中，并且除了一个较小的异常外，它的运行情况非常好。 只有在页面上的任意位置单击一次后，它才起作用。 页面的可排序元素所在的部分是在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>