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

Question

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

假设我有一个简单的 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 Widget Events

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

widgetEventPrefix: "sort"

因此，当可排序小部件在内部调用start事件trigger()时，它会触发一个sortstart事件（复合事件），但这并不意味着它一定在侦听该事件。

例 1

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

例 2

第二个示例是将事件处理程序连接到紧随其后的触发事件;但是这实际上从未调用可排序小部件的内部代码。