错误：TypeError：$（...）。dialog不是函数

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:

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

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>

From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.

从帖子周围看起来像是一个图书馆导入问题。我下载了JQuery UI Core，Widget，Mouse和Position依赖项。

Any Ideas?

有任何想法吗？

7 个解决方案

#1

Be sure to insert full version of jQuery UI. Also you should init the dialog first:

一定要插入完整版的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>

#2

If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:

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

    </footer>

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

#3

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

如果某些原因加载了两个版本的jQuery（不建议使用），从第二个版本调用$ .noConflict（true）将返回全局范围的jQuery变量到第一个版本的变量。

Some times it could be issue with older version (or not stable version) of JQuery files

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

Solution use $.noConflict();

解决方案使用$ .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>

#4

I just experienced this with the line:

我只是用这条线体验过这个：

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

I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.

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

As soon as I commented out the second load, the error went away.

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

#5

Here are the complete list of scripts required to get rid of this problem. (Make sure the file exists at the given file path)

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

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

and also include the below css link in _Layout.cshtml for a stylish popup.

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

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

#6

I had a similar problem and in my case, the issue was different (I am using Django templates).

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

The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.

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

I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

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

#7

Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.

将jQueryUI更改为1.11.4版，并确保jQuery不会添加两次。

#1