11

このjsbinによると、sortableリストとボタンがあります。ボタンをクリックすると何かが追加されsortable、どのイベントが発生したかを知りたいsortableですか?(更新、受信)、イベントを見つけたときにそのイベントで何かを行います。

たとえば、ユーザーがaddボタンをクリックした場合、どのイベントが発生し、イベントで何かを行っているかを知りたいです。たとえば、更新が発生した場合、sortableの更新メソッドで何かを行います

$('.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

sortable のoptionメソッドを使用する (そのコールバックを取得するため)

update コールバックはソート可能なウィジェットのオプションとして定義されているため、オプション メソッドを呼び出すことで取得できます。

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

update コールバックには、と aの2 つのパラメータが必要です。はnull に設定でき、必要なすべてのプロパティで定義する必要があります。eventui objecteventui objectupdate callback

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

ワーキング JS フィドル

于 2014-05-07T11:48:42.750 に答える