错误:TypeError:$(..）.dialog不是函数

Error: TypeError: $(...).dialog is not a function

本文关键字：函数 dialog TypeError 错误      更新时间：2023-09-26

让对话框作为基本功能工作时遇到问题。以下是我的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>

从周围的帖子来看，这似乎是一个图书馆导入问题。我下载了JQueryUICore、Widget、Mouse和Position依赖项。

有什么想法吗？

请确保插入完整版本的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>

如果由于某种原因加载了两个版本的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>

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

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

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

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

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

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

我刚刚在这行遇到了这种情况

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

我得到了错误"dialogelfinder不是一个函数"，因为另一个组件在加载新版本的JQuery（1.7.2）后插入了一个加载旧版本的调用。

我一评论完第二次加载，错误就消失了。

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

   <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" />
相关文章：