javascript - 在 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 实例上。