11

根据这个jsbin我有一个sortable列表和一个按钮。当单击按钮添加一些东西时sortable，我想知道哪个事件sortable被触发？（更新，接收）以及在找到事件时对该事件执行某些操作。

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

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

2 回答 2

23

问题

当您将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 演示

于 2013-10-13T10:25:22.403 回答
17

使用option可排序的方法（检索其回调）

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

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

更新回调需要两个参数， theevent和 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

于 2014-05-07T11:48:42.750 回答