Webpack

Question

我有一个 reservation.js 脚本，其中包含一个将事件侦听器添加到表单输入的函数。

paymentInstalments.addEventListener('click', ()=> (...))

此函数在页面加载时执行 jquery 的 $(document).ready()

然而，这种方法被证明很麻烦，因为当我尝试加载的页面没有名为 "paymentInstalments" 的 id 时，我得到一个 TypeError "Cannot read property 'addEventListener' of null"。

发生这种情况显然是因为我尝试添加事件侦听器的元素在 html 中不存在。

因此，我的问题是：Webpack 不应该足够聪明，能够理解何时执行给定的导入吗？还是由我来管理何时执行脚本？

提前致谢:)

Answer 1

如果您试图在 DOM 元素实际存在于 DOM 之前与其进行交互，您将运行进入此问题。 Webpack 帮不了你。

如果您想向某个元素添加事件侦听器，但在访问它时遇到问题，请尝试将事件委托给您知道会存在的另一个元素。类似于：

$('body').on('click', #paymentInstalments', function(e) {
    // do stuff
});

Webpack - 什么时候加载模块？