如何以编程方式触发带按钮的可排序小部件的更新回调？

Question

根据这个jsbin我有一个sortable列表和一个按钮.当点击按钮的东西添加到sortable,我想知道哪个事件sortable被触发？(更新,接收),并在找到事件时对该事件做一些事情.

例如,如果用户点击add按钮我想知道哪个事件被触发并在事件上做某事.例如,如果更新火我在可排序的更新方法中做了一些事情

$('.sort').sortable({
 update:function(){
//if update fire do some thing
}
});
  $('#add').click(function(){
  $('.sort').append('<li>Text</li>');
});

Answer 1

问题

当你定义的update回调由于部分sortable部件选项,称为事件sortupdate是不是绑定到小部件.换句话说,update确实调用了该选项定义的回调函数,但在这种情况下不会触发该名称的事件.

解决方案

如果您希望手动触发事件,还需要手动绑定它.请注意,事件也将由窗口小部件的常规行为自动触发(例如,用户对窗口小部件中的元素进行排序).

例如:

HTML

<ul class="sort"></ul>
<button id="add">Add</button>

JS

 // Instantiate the widget
$('.sort').sortable();

 // Bind the update event manually
$('.sort').on('sortupdate',function() {console.log('update')});

$('#add').click(function(){
    $('.sort').trigger('sortupdate'); // Trigger the update event manually
});

参见JS Bin Demo

Answer 2

使用optionsortable中的方法(检索其回调)

由于更新回调被定义为可排序小部件的一个选项,因此可以通过调用option方法来检索它:

$('.sort').sortable('option', 'update');

更新回调需要两个参数,eventa和a ui object.该event可设置为null,ui object与所有属性的定义需求update callback预计:

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

工作JS-Fiddle