在 webpack 中通过 jQuery 触发事件并在页面上处理

Question

我正在处理或检修一个非常大的 React 应用程序。我有一个在 React 中处理的表单（并与 webpack 捆绑在一起）。成功提交表单后，我需要刷新页面上的数据表（不由 React/Webpack 处理）。我试图只在页面上注册一个侦听器并通过 jQuery 在 React 中触发该事件，但该事件未向侦听器注册。我做错了什么吗？

在 webpack 插件中（不使用开发服务器）：

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}),

在我的 React 代码中：

handleCreated = () => {
  $(document).trigger('reload:datatable');
  // ...
}

在页面上（在脚本标签中）：

$(document).on('reload:datatable', function (e) {
  console.log('reload.task.table'); // This never gets called
});

Answer 1

我知道这是一个非常古老的问题，但答案可能与 React 无关，而是与 jQuery 的行为以及它如何 Webpack 捆绑代码有关。您在 Webpack 中获得的 jQuery 实例引用通常不会与全局共享 - 这意味着除非您全局共享该实例，否则您的文档脚本标记级别代码可能会针对不同的 jQuery 实例执行。如果您在导入中直接引用 jQuery，然后在全局范围内包含 jQuery 以执行内嵌代码，那么您将获得两个不同的 jQuery 实例以及两个不同的自定义事件队列。

如果我做了类似这个伪代码的事情

// include jQuery on the page
... <script src="jquery.js" /> ...

// register a custom event listener
$(document).on('example:thing', () => { console.log('test'); });

// load jQuery onto the page again (such that the original jQuery instance is overwritten)
... <script src="jquery.js" /> ...

// trigger the custom event
$(document).trigger('example:thing');

结果是什么都不会发生——自定义事件不会触发。jQuery 中的自定义事件在 jQuery 实例中存储和处理，而不是在 DOM 中。为了注册和触发 jQuery 自定义事件，两个事件都需要在同一个 jQuery 实例上。