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

时间:2013-10-13 07:39:11

标签: jquery jquery-ui jquery-ui-sortable

根据这个jsbin,我有一个sortable列表和一个按钮。当点击按钮时,有些内容会添加到sortable,我想知道sortable的哪个事件被触发了?(更新,接收),当找到事件时,会对该事件做些什么。

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

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

2 个答案:

答案 0 :(得分:19)

问题

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

答案 1 :(得分:16)

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

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

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

更新回调expects two parameterseventui objectevent可以设置为null,ui object需要使用update callback期望的所有属性进行定义:

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

Working JS-Fiddle