类型错误：$(document).ready 不是 jQuery 中的函数

作者

介绍

TypeError: $(document).ready is not a function in jQuery

本文介绍了常见的“jQuery 不是函数”错误。

确保根据您的错误消息单击目录中的正确副标题。

目录

  1. 类型错误：$(document).ready 不是 jQuery 中的函数
  2. TypeError: $(…).autocomplete 不是 jQuery 中的函数
  3. TypeError: $(…).validate 不是 jQuery 中的函数

TypeError: $(document).ready 不是 jQuery 中的函数

“TypeError: $(document).ready is not a function”错误的发生有多种原因：

  • 在调用该方法后放置第二组括号ready()。
  • 运行 JavaScript 代码后加载 jQuery 库。
  • 忘记加载 jQuery 库。
  • 在同一页面上多次加载 jQuery 库。
  • 覆盖代码中的$或变量。jQuery

typeerror document ready 不是一个函数

下面是错误如何发生的示例。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

  </head>

  <body>
    <div>Hi There</div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
$(document).ready(function () {
  console.log('hello world');
})(); // 👈️ has extra set of ()
// ⛔️ TypeError: $(...).ready(...) is not a function

发生错误是因为我们在$(document).ready()方法之后放置了第二组括号
，因此我们有效地调用了该ready()方法的返回值。

要解决此问题，请删除第二组括号。

索引.js
$(document).ready(function () {
  console.log('hello world');
}); // ✅ Works

要解决“$(document).ready is not a function”错误，请确保在运行 JavaScript 代码之前加载 jQuery 库，并在页面上仅加载一次 jQuery。

我们加载脚本的顺序很重要。文件中的脚本
index.html应按以下顺序加载：

  1. 加载 jQuery 库。
  2. 加载您的 JavaScript 代码。

如果您尝试在运行您的文件后加载 jQuery 库index.js，则 jQuery 全局变量将无法在您的 JS 文件中访问，并且您将返回错误。

如果您在同一页面上两次加载 jQuery 库，也会发生同样的情况。两次加载库会重新运行初始化过程，并且经常会导致全局 jQuery 变量出现故障导致错误。

错误的另一个原因是忘记在页面上加载 jQuery 库。如果不加载库，则无法在代码中访问 jQuery 全局变量。

最后，如果您在代码中声明$或jQuery变量并隐藏库中的值，也会发生该错误。

$如果您引入另一个定义orjQuery变量并与原始 jQuery 库冲突的第三方包，也可能会发生这种情况。

结论

要解决“$(document).ready is not a function”错误，请确保在运行 JavaScript 代码之前加载 jQuery 库，并在页面上仅加载一次 jQuery。

  1. TypeError: $(…).autocomplete 不是 jQuery 中的函数
  2. TypeError: $(…).validate 不是 jQuery 中的函数

TypeError: $(…).autocomplete 不是 jQuery 中的函数

“$(…).autocomplete is not a function”jQuery 错误的发生有多种原因：

  1. 忘记包含 jQuery UI 库。
  2. 在 jQuery 库之前加载 jQuery UI 库。
  3. 加载 jQuery 库两次。
  4. 指定了错误的 jQuery 文件路径。

要解决“$(…).autocomplete is not a function”jQuery 错误，请确保在加载 jQuery UI 库之前加载 jQuery 库。

这些库只能在页面上加载一次，否则会抛出错误。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- ✅ Load CSS file for jQuery UI  -->
    <link
      href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" />
    </div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load jQuery UI ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

加载脚本的顺序非常重要。我们按以下顺序加载脚本：

  1. jQuery UI CSS 样式表
  2. jQuery 库
  3. jQuery 用户界面库
  4. 我们自己的index.js档案

这是该文件的代码index.js。

索引.js
$(document).ready(function () {
  $(function () {
    const availableTags = [
      'ActionScript',
      'AppleScript',
      'Asp',
      'BASIC',
      'C',
      'C++',
      'Clojure',
      'COBOL',
      'ColdFusion',
      'Erlang',
      'Fortran',
      'Groovy',
      'Haskell',
      'Java',
      'JavaScript',
      'Lisp',
      'Perl',
      'PHP',
      'Python',
      'Ruby',
      'Scala',
      'Scheme',
    ];
    $('#tags').autocomplete({
      source: availableTags,
    });
  });
});

如果您打开该页面，您将看到一个带有自动完成功能的输入字段。

如果您忘记加载 jQuery UI 库或加载 jQuery 库两次，则最常发生该错误。

两次加载 jQuery 库会重新运行初始化并导致错误。

如果您从本地文件系统上的文件加载库，请确保您指定了正确的路径。

加载脚本时指定不正确的路径等同于根本不加载脚本并导致错误。

F12您可以通过按下并单击选项卡打开您的开发人员工具来检查您是否正确加载了脚本Console。

如果您看到任何404与加载 jQuery 脚本相关的错误，则文件路径不正确。

结论

要解决“$(…).autocomplete is not a function”jQuery 错误，请确保在加载 jQuery UI 库之前加载 jQuery 库。

这些库只能在页面上加载一次，否则会抛出错误。

TypeError: $(…).validate 不是 jQuery 中的函数

“$(…).validate is not a function”jQuery 错误发生在未加载 jQuery 验证插件或以错误顺序加载 jQuery 相关脚本时。

验证插件应该在 jQuery 库之后加载。

这是一个工作示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 👇️ Example form from docs  -->
    <form id="commentForm" method="get" action="">
      <fieldset>
        <p>
          <label for="cname">Name (required, at least 2 characters)</label>
          <input id="cname" name="name" minlength="2" type="text" required />
        </p>
        <p>
          <label for="cemail">E-Mail (required)</label>
          <input id="cemail" type="email" name="email" required />
        </p>
        <p>
          <label for="ccomment">Your comment (required)</label>
          <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
          <input class="submit" type="submit" value="Submit" />
        </p>
      </fieldset>
    </form>

    <!-- ✅ FIRST - load jquery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ SECOND - load jquery validate ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
      integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ THIRD - load additional methods ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"
      integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ FOURTH - load your JS script ✅ -->
    <script src="index.js"></script>
  </body>
</html>
请注意，我们在加载 jQuery 库之后和加载其他方法之前加载了 jQuery 验证插件。

该index.js文件在所有其他脚本之后加载。

这是文件中的代码index.js：

索引.js
$('#commentForm').validate();

如果您刷新页面并尝试提交表单，您将看到验证开始。

添加 JS 脚本的顺序非常重要，确保在加载 jQuery 库之后加载 jQuery 验证插件。

发生错误的另一个常见原因是 jQuery 脚本的路径不正确。

如果您决定将 jQuery 代码下载到本地文件系统并直接包含它而不是使用 CDN，请确保指定文件的正确路径。

另外，请确保您没有在同一页面上两次包含 jQuery 库或插件。两次加载同一个库可能会导致错误。

结论

“$(…).validate is not a function”jQuery 错误发生在未加载 jQuery 验证插件或以错误顺序加载 jQuery 相关脚本时。

验证插件应该在 jQuery 库之后加载。