未捕获的 TypeError：jQuery(...).dialog 不是函数

Question

我尝试了所有的 CDN，但总是出错。请推荐正确的CDN

jQuery(document).ready(function() {
  debugger;
  jQuery(function() {
    jQuery("#divLookUp").dialog({
      autoOpen: false,
      minWidth: 600,
      show: {
        effect: "clip",
        duration: 200
      },
      hide: {
        effect: "clip",
        duration: 200
      }

    });
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.form/4.2.1/jquery.form.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://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" />

未捕获的类型错误：jQuery(...).dialog 不是函数

Answer 1

给定代码对jQuery(...).dialog is not a function 的唯一解释是浏览器阻止加载http://code.jquery.com/ui/1.11.1/jquery-ui.min.js，这可能是因为您在https 网站上测试了给定代码，或者可能是因为您启用了脚本阻止程序。

如果您在https 上测试了您的代码，那么所有以http: 开头的脚本的加载都会被阻止。如果您将代码加载更改为：

jQuery(document).ready(function() {
  debugger;
  jQuery(function() {
    jQuery("#divLookUp").dialog({
      autoOpen: false,
      minWidth: 600,
      show: {
        effect: "clip",
        duration: 200
      },
      hide: {
        effect: "clip",
        duration: 200
      }

    });
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.form/4.2.1/jquery.form.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//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" />

错误将不再存在。但是你仍然有加载多个 jQuery 和 jQuery UI 版本的问题。

如果问题仍然存在，那么您的浏览器或其他东西阻止了 jquery ui 的加载。

Answer 2

在第一行，您只是导入了 jQueryUI css 而不是 JavaScript 库。您需要添加 jQueryUI js 依赖和 jQuery js 依赖（请注意 https 源）。

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="openDialogBtn">Click to open the dialog</button>
<div id="dialog" title="I'm the dialog title" hidden="hidden">I'm the dialog body</div>

<script>
$("#dialog").dialog({
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "clip",
        duration: 200
    },
    hide: {
        effect: "clip",
        duration: 200
    }
});

$("#openDialogBtn").click(function() {
    $("#dialog").dialog("open");
});
</script>

Answer 3

将此添加到您的 html 文件中：

<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"> </script>

Answer 4

而不是跟随

        var box = $("#wait").dialog({
            autoOpen: false,
            //height: 150,
            //weight: 50,
            resizable: false,
            modal: true
        }).parent().find('.ui-dialog-titlebar').hide();
        $(document).ajaxStart(function(){
            $("#wait").dialog('open');
        });
        $(document).ajaxComplete(function(){
            $("#wait").dialog('close');    
        });

我使用了下面的代码。有效。

$(函数() {

        var box = $("#wait").dialog({
            autoOpen: false,
            //height: 150,
            //weight: 50,
            resizable: false,
            modal: true
        }).parent().find('.ui-dialog-titlebar').hide();
        $(document).ajaxStart(function(){
            $('#wait').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;  
        });
        $(document).ajaxComplete(function(){
            $('#wait').load(this.href, function () {
                $(this).dialog('close');
            });
            return false;
        });
    });

试试这个代码，在我的设置上测试过。工作正常。

Answer 5

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>

<div id="bilal" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>

<script>

  $( function() {
    $( "#bilal" ).dialog({
    autoOpen: true,
  minWidth: 600,
  show: {
    effect: "clip",
    duration: 200
  },
  hide: {
    effect: "clip",
    duration: 200
  }
    });
  } );

</script>

试试这个代码，在我的设置上测试过。工作正常。谢谢