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

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

使用sortable中的option方法（检索其回调）

由于更新回调被定义为可排序小部件的选项，因此可以通过调用option method来检索>

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

更新回调expects two parameters，event和ui object。 event可以设置为null，ui object需要使用update callback期望的所有属性进行定义：

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

Working JS-Fiddle