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

Question

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

73

我在使用对话框的基本功能时遇到了问题。这是我的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依赖项。

有任何想法吗？

- mzereba

1

使用文档就绪处理程序怎么样？ - Rajaprabhu Aravindasamy

@RajaprabhuAravindasamy 不会有任何影响，因为脚本在按钮元素之后。无论如何，它不会抛出错误。 - JJJ

2

@Maged 你也下载了对话框依赖吗？ - JJJ

@Juhana，没有对话框依赖。 - Mike Perrenoud

@MichaelPerrenoud 好的，我在http://jqueryui.com/download/上看到了一个。 - JJJ

显示剩余8条评论

7个回答

14

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

- Manoj Patil

2

这就是我的问题所在，最终我移除了一个版本，这个解决方案确实给了我提示。 - Emily

8

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

    </footer>

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

- Rocky Royalson

1

有人可以详细解释一下为什么吗？ - Tamás Szabó

我在我的ViewPage上有这个@Scripts.Render（“〜/bundles/jquery”），而不是布局，但布局也有这段代码。当我删除它时，我的.js文件终于可以工作了，感谢您的信息...我和我的同事一直在搞JQuery，我想他添加了那部分，自从他这样做后，什么都没正常工作...为什么我不知道，我是JS新手。 - solujic

1

将jQueryUI更改为版本1.11.4并确保不会重复添加jQuery。

- crazysj

1

我遇到过类似的问题，但我的情况不同（我正在使用Django模板）。

JS的顺序不正确（我知道这是您要检查的第一件事，但我几乎确定那不是问题所在，但实际上是）。调用对话框的js在调用jqueryUI库之前被调用。

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

- Anupam

0

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

   <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" />

- josepainumkal

0

我刚刚遇到了这个问题，出现在这一行代码：

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

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

只要我注释掉第二次加载的代码，错误就消失了。

- Bob Ray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dashtinejad · Accepted Answer

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