未捕获的 TypeError：jQuery(...).intlTelInput 不是函数答案

【问题标题】：Uncaught TypeError: jQuery(...).intlTelInput is not a function未捕获的 TypeError：jQuery(...).intlTelInput 不是函数
【发布时间】：2018-10-21 21:16:16
【问题描述】：

在预约过程的第三步时，我在 Google Chrome 中收到以下错误。

Uncaught TypeError: jQuery(...).intlTelInput is not a function
  at HTMLButtonElement.<anonymous> (custom.js:330)
    at HTMLDocument.dispatch (jquery.js:3)
    at HTMLDocument.r.handle (jquery.js:3)

custom.js 的第 330 行显示以下代码：

var phone = jQuery("#phone").intlTelInput("getNumber");

完整的 custom.js 可用here

产生此错误的页面是here - 它出现在第3步。详细信息

当我禁用当前主题并转到默认的 Twentyseventeen 主题时会消除错误并且插件可以完美运行。

请帮助我解决当前主题中的错误。可能是什么问题。

我尝试将 jquery 放在每个脚本之上，但它也不起作用。

这是它在默认 Twentyseventeen 主题中工作的页面的源代码 - https://pastebin.com/qKJZynLp

这是它不起作用的页面的源代码 - https://pastebin.com/CNV8wfmK

请帮忙。

【问题讨论】：

你在它之后包含 jquery，所以它会覆盖插件。
能否请您具体说明哪个文件以及它应该在哪里。不介意尝试学习一些东西。
您不止一次包含 jquery 库。查看 jquery 参考资料。你的脑袋和身体里都有它
是的，你说的很对。我在覆盖插件的页脚中有那个 jquery/jquery.min.js。我现在已经删除了它，它工作得很好。非常感谢朋友。

标签： javascript jquery typeerror

【解决方案1】：

我有同样的错误。我将以下代码放在页面顶部，以便在到达 intlTelInput 部分之前加载库

<link rel="stylesheet" href="location/to/intl-tel-input/css/intlTelInput.css">
<script src="location/to/intl-tel-input/js/intlTelInput.js"></script>

然后我用以下代码初始化了代码

var input = document.querySelector("#phone");
window.intlTelInput(input);

由于他们在 git 上的声明，我没有使用 jQuery

从 v14 开始，我们删除了 jQuery 依赖项。请参阅下文，了解如何使用纯 JavaScript 初始化和使用插件。如果你想坚持使用 jQuery 版本，现在有一个单独的 jQuery 包装版本。

我希望这会有所帮助:)

【讨论】：

【解决方案2】：

执行以下步骤：

首先检查以下文件是否包含在您的代码中。

1. <link rel="stylesheet" href="path/to/css/intlTelInput.css"> 2. <script src="path/to/js/intlTelInput.js"></script> 3. <script src="path/to/js/utils.js"></script>

如果您正确地包含了上述文件，那么您永远不会收到这样的错误：Uncaught TypeError: jquery.intlTelInput is not a funciton

【讨论】：

【解决方案3】：

app/code/Magecomp/Sms/view/frontend/web/countryflag/js/intlTelInput.min.js：将“定义”替换为“要求”。

define(["jquery"],function(b){...

到

require(["jquery"],function(b){...

【讨论】：