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

TypeError: $(…).dialog is not a function in jQuery

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

忘记包含 jQuery UI 库。
在 jQuery 库之前加载 jQuery UI 库。
加载 jQuery 库两次。
加载不包含对话框的自定义版本的 jQuery UI 库。
指定了错误的 jQuery 文件路径。

jquery dialog is not a function 错误

要解决“$(…).dialog 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 id="dialog" title="Basic dialog">
      <p>
        This is the default dialog which is useful for displaying information.
        The dialog window can be moved, resized and closed with the
        &apos;x&apos; icon.
      </p>
    </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>

加载脚本的顺序非常重要。顺序如下：

加载 jQuery UI 的 CSS 文件。
加载 jQuery 库。
加载 jQuery UI 库。
运行您的 JavaScript 文件（index.js在示例中）。

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

索引.js


$(document).ready(function () {
  $('#dialog').dialog({
    autoOpen: true,
  });
});

在index.js文件中，我们等待 DOM 准备就绪并显示对话框。

如果您打开浏览器，您将看到对话窗口。

查询对话框

如果仍然出现错误，请确保在加载 jQuery 之后加载 jQuery UI 库，并且没有加载 jQuery 两次。

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

您还可以尝试noConflict在 JS 文件中以模式运行 jQuery。

索引.js


// 👇️ load in noConflict mode
const $jq = $.noConflict();

$jq(document).ready(function () {
  $jq('#dialog').dialog({
    autoOpen: true,
  });
});

确保您没有使用自定义版本的 jQuery UI，因为某些自定义版本不包含对话框。

如果您从本地文件系统上的文件加载库，请确保正确指定文件的路径。指定错误的脚本路径等同于根本不加载脚本。

在浏览器中打开控制台时，您可以检查是否正确加载了脚本。如果您看到任何404与加载 jQuery 脚本相关的错误，则文件路径不正确。

结论#

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

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

–