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"

因此，当sortable小部件在内部为trigger()事件调用start时，它会触发sortstart事件（复合），但这并不意味着它必须侦听该事件。

示例1

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

示例2

第二个例子是将事件处理程序连接到之后立即触发的事件;但实际上这并没有实际调用可排序小部件的内部代码。

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

1 个答案: