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>