使用jQuery编程移动项目，同时仍然触发事件

我正在使用jQuery Sortable。 我有这样的HTML设置：

<ul id='plan'> <li class='item'>1</li> <li class='item'>2</li> <li class='item'>3</li> <li class='item'>4</li> </ul> 

我想以编程方式将<li>移动到不同的位置。 我可以用下面的JS来实现这个：

 $("#plan li:eq(1)").insertAfter($("#plan li:eq(2)")); 

这工作正常，除非它不触发像更改或更新的可sorting事件。 我有一个在sorting的更新事件上运行的函数，但是用JS移动li不会触发这个。

有谁知道如何触发sorting更新事件？

Answer 1

 $("selector").trigger("sortupdate"); 

你将不得不作为第二个parameter passing一个函数放在事件和UI中，事件并不像UI那么重要

用于事件触发的可sorting小部件的内部代码如下所示

 this._trigger("update", event, this._uiHash(this)); 

所以你可能要做下面的事情

 function triggerUpdateFor(selector) { var widget = $(selector).sortable("widget"); if (widget) widget._trigger("update", null, widget._uiHash(widget)); } 

Answer 2

使用可sorting的option方法（检索其callback）

由于每个事件callback被定义为可sorting小部件的一个选项 ，因此可以通过调用相应事件callback选项的选项方法 （此示例使用updatecallback）来检索它。

 $('#plan').sortable({ update: function(event, ui) { // Do something... } }); $('#plan').sortable('option', 'update'); // returns function 

更新callback期望两个参数 ， event和一个ui object 。 该event可以设置为null，并且需要使用update callback期望的所有属性来定义ui object ：

 $('#plan').sortable('option','update')( null, { item: $('<li>new item</li>').appendTo($('#plan')) } ); 

这适用于您定义的所有事件callback（即receive ， change等）。

工作JS小提琴

Answer 3

trigger方法接受额外的参数，所以如果你需要ui参数，你需要自己传入。 但是你通常只需要目标ui.item ，在这种情况下，你知道这是什么：

 var sortupdate = function (event, ui) { // do something with ui.item }; var $plan = $("#plan"); $plan.sortable({ update: sortupdate }); $plan.on("sortupdate", sortupdate); // sortupdate is not automatically bound var $item = $("#plan li:eq(1)"); $item.insertAfter($("#plan li:eq(2)")); $plan.trigger("sortupdate", { item : $item }); 

演示：

http://jsfiddle.net/D7fCz/3/

Answer 4

更简单：

 $('#plan').sortable('refresh');