错误: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

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

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

    </footer>

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

Answer 3

如果由于某种原因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>