错误：TypeError：$(...).dialog 不是函数

Question

我在让对话框作为基本功能工作时遇到问题。这是我的 jQuery 源导入：

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

HTML：

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
</script>

从周围的帖子看来，这是一个库导入问题。我下载了 JQuery UI Core、Widget、Mouse 和 Position 依赖项。

有什么想法吗？

Answer 1

如果由于某种原因加载了两个版本的 jQuery（不推荐），从第二个版本调用 $.noConflict(true) 会将全局范围的 jQuery 变量返回到第一个版本的变量。

有时，JQuery 文件的旧版本（或不稳定版本）可能会出现问题

解决方案使用$.noConflict();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
});
// Code that uses other library's $ can follow here.
</script>

Answer 2

将 jQueryUI 更改为 1.11.4 版本，并确保 jQuery 没有添加两次。

Answer 3

请务必插入完整版的 jQuery UI。你也应该先初始化对话框：

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

Answer 4

我遇到了类似的问题，在我的情况下，问题有所不同（我使用的是 Django 模板）。

JS 的顺序不正确（我知道这是您检查的第一件事，但我几乎可以肯定情况并非如此，但确实如此）。调用对话框的js是在调用jqueryUI库之前调用的。

我正在使用 Django，因此继承了模板并使用 {{super.block}} 将代码从块以及模板继承。我不得不在解决问题的块末尾移动 {{super.block}}。调用对话框的 js 是在 Django 的 admin.py 中的 Media 类中声明的。我花了一个多小时才弄清楚。希望这对某人有所帮助。

Answer 5

以下是解决此问题所需的完整脚本列表。 （确保文件存在于给定的文件路径）

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

并在 _Layout.cshtml 中包含下面的 css 链接，以获得时尚的弹出窗口。

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

Answer 6

我刚刚经历了这一行：

$('<div id="editor" />').dialogelfinder({

我收到错误“dialogelfinder 不是函数”，因为在加载较新版本后，另一个组件正在插入调用以加载较旧版本的 JQuery (1.7.2)。

我一注释掉第二次加载，错误就消失了。

Answer 7

如果您从_Layout.cshtml 页面注释掉以下代码，模态弹出窗口将开始工作：

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>