Uncaught TypeError: $(...).dialog is not a function error when created dialog box答案

【问题标题】：Uncaught TypeError: $(...).dialog is not a function error when creating dialog boxUncaught TypeError: $(...).dialog is not a function error when created dialog box
【发布时间】：2016-09-13 12:14:59
【问题描述】：

我正在尝试创建一个打开对话框的 onlick 事件，但我不断收到 Uncaught TypeError: $(...).dialog is not a function error。

HTML

                <div class="form-group required">
                    <input type="button" value="Button " id="add" />
                </div>
                <div id="dialog" hidden="hidden">
                    Hiiii
                </div>

JQUERY

            $(function() {
              $( "#dialog" ).dialog({
                autoOpen: false
              });

              $("#add").click(function() {
                $("#dialog").dialog('open');
              });
            });

调试器指向

$( "#dialog" ).dialog({

作为错误的来源

【问题讨论】：

您是否包含了 jQuery-UI？ jQuery 之后呢？

标签： javascript jquery html dialog

【解决方案1】：

在正文标记结束之前添加您的 jquery 代码。

   <script>
      $(function() {
                  $( "#dialog" ).dialog({
                    autoOpen: false
                  });

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

</body>

【讨论】：

只要在 jquery 和 jquery-ui 包含之后，并且您使用的是$() onload，它就不需要在正文的末尾。