Javascript 错误：TypeError: $(...).dialog 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26016562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: TypeError: $(...).dialog is not a function
提问by mzereba
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:
网址：
<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?
有任何想法吗？
回答by dashtinejad
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>回答by Rocky Royalson
If you comment out the following code from the _Layout.cshtmlpage, the modal popup will start working:
如果您从_Layout.cshtml页面中注释掉以下代码，模态弹出窗口将开始工作：
</footer>
@*@Scripts.Render("~/bundles/jquery")*@
@RenderSection("scripts", required: false)
</body>
</html>
回答by Manoj Patil
if some reason two versions of jQueryare loaded (which is not recommended), calling $.noConflict(true)from the second version will return the globally scoped jQueryvariables to those of the first version.
如果由于某种原因jQuery加载了两个版本（不推荐），$.noConflict(true)从第二个版本调用会将全局范围的jQuery变量返回到第一个版本的变量。
Some times it could be issue with older version (or not stable version) of JQueryfiles
有时可能是旧版本（或不稳定版本）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>
回答by crazysj
Change jQueryUI to version 1.11.4and make sure jQuery is not added twice.
将 jQueryUI 更改为1.11.4版并确保 jQuery 没有添加两次。
回答by Bob Ray
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.
一旦我注释掉第二次加载，错误就消失了。
回答by josepainumkal
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" />
回答by Anupam
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 类中声明的。我花了一个多小时才弄明白。希望这可以帮助某人。
