jQuery的可排序的唯一火灾第二次点击

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>

对于后来人读这一点，关键要接受的答案是拥有jQuery代码部分加载的每个HTML的部分是通过AJAX加载到文档的时间，而不是在第一次加载页面本身时加载的“主”代码片段中。

Answer 1

你不需要鼠标按下事件处理程序（此处被拆除），因为这是造成排序，只添加后，你做你的初始点击（如自己所描述的）

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