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

【问题标题】：Trigger event via jQuery in webpack and handled on page通过 webpack 中的 jQuery 触发事件并在页面上处理
【发布时间】：2016-07-25 21:17:05
【问题描述】：

我正在处理或大修一个非常大的 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
});

【问题讨论】：

我认为不推荐使用 jQuery 和 React - jQuery 直接修改 DOM，而 React 使用虚拟 DOM。
我仅次于 Toby，你不能在 React 中使用 jquery 事件
我的 2 美分：确保在安装 React 表单之前注册监听器
@Toby 虽然我同意将 React 与 jQuery 混合不是“首选”，但在某些情况下您没有太多选择（即转换遗留项目）。然而，这就是 React 的伟大之处，你可以接管页面的某些部分，直到最终可以转换所有内容。
@TudorIlisoi 如果我创建一个新的 CustomEvent（对旧浏览器使用 polyfill），它就可以工作！不确定为什么它不适用于 jQuery 事件，但如果您想用您的评论创建答案，我会将其标记为正确。谢谢！

标签： javascript jquery reactjs webpack

【解决方案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 实例上。

【讨论】：