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

Question

I've integrated the jquery "sortable" feature into my website, and it works perfectly with one minor exception. It only works after I click once anywhere on the page. The section of the page the sortable elements are found is loaded after an ajax query, so I'm using the "on" function. I'd love to figure out how to get this to work without having to click first.

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

For anyone reading this later, the key to the accepted answer is to have the portion of JQuery code loaded every time the portion of HTML is loaded into the document via AJAX, rather than in a "main" piece of code that's loaded the first time the page itself is loaded.

Answer 1

You don't need the mousedown event handler (removed here), since this is causing the sortable to only be added after you do your initial click (as described by yourself)

 $("#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>