未捕获的类型错误：jQuery(...).intlTelInput 不是函数

Question

我在预约流程的第三步时在 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 可在此处获取

生成此错误的页面位于此处- 它出现在步骤 3 中。 详细信息

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

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

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

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

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

请帮忙。

Answer 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 包装版本。

我希望这有帮助 ：）