jquery - jQuery UI 可排序小部件的 jQuery 事件处理不一致

Question

关于 jQuery 事件处理，我有些不明白。我在使用 jQuery UI 时发现了这个问题 sortable widget 。我试图在小部件上触发排序事件。

假设我有一个简单的 HTML 列表:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

我首先尝试像这样触发排序事件:

$('ul').sortable({
  start: function() { console.log("drag started"); }
});

// No output to the console from this line
$('ul').trigger('sortstart');

这段代码有问题吗？启动回调函数没有被调用...难道没有办法触发这个回调吗？但是，我发现以下方法确实有效:

$('ul').sortable();
$('ul').on('sortstart', function() { console.log('drag started'); });

// This line does cause the console to output 'drag started'
$('ul').trigger('sortstart');

我很想知道为什么第一次尝试失败。

Answer 1

jQuery-UI 小部件事件

jQuery-UI 为其小部件触发的所有事件使用前缀。对于 ui.sortable 小部件，widgetEventPrefix 是 sort。这是直接取自 jQuery-ui 代码的可排序小部件的初始化信息的一部分:

widgetEventPrefix: "sort"

因此，当可排序小部件在内部调用 trigger() 来触发 start 事件时，它会触发 sortstart 事件(复合事件)，但它并不意味着它必须监听该事件。

示例 1

第一个示例告诉 jQuery 将回调连接到可排序小部件的 start 方法。当调用 start 方法时，这将在内部调用。代码的触发器部分 ($('ul').trigger('sortstart')) 只是触发一个与 jQuery-ui 内部触发的事件同名的事件。 jQuery-UI 没有监听此事件，并且不会通过此触发器以任何方式调用。

示例 2

第二个示例是将事件处理程序连接到随后立即触发的事件；然而，这实际上从未调用可排序小部件的内部代码。