javascript - 对话框函数错误无效函数

Question

TypeError: $("").html("This dialog will show every time!").dialog is not a function

这是我遇到的错误。该页面是使用索引页面上的 div 中的 load() 加载的。我已经在索引页面(我希望保持这种方式)、加载页面以及两者中包含必要的 jquery 内容，它仍然这样做。我不确定到底发生了什么。我知道使用 load() 页面而不是页面本身更困难，但即使转到页面 home.php，它仍然会这样说。下面是加载页面的链接，如果想看索引，把地址里的home.php去掉就可以了。

The page that is being loaded

这是我正在使用的函数:

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>

    <script type="text/javascript">
    function readMore(id,title,cat,desc,post,auth) {
        //alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth);
        var $dialog = $('<div></div>').html('This dialog will show every time!').dialog({autoOpen: false,title: 'Basic Dialog'});
        $dialog.dialog('open');
        $dialog.title = title;
        $dialog.html(desc);
    }
    </script>

就目前而言，对话框的所有包含都在加载页面上，而不是索引页面上，但正如我所说，我已经尝试了一个或另一个或两个，但无济于事。警报也可以正常工作，并且可以正确传递所有内容，并在我需要时被调用。 jquery 包含的所有路径都是正确的。

如果出于某种原因它有助于缩小范围，我也会在页面加载时遇到错误:TypeError: $.widget 不是函数[打破这个错误]

_uiHash: function(event) {

jquery...able.js(第 504 行)

TypeError: $.widget 不是函数[打破这个错误]

_mouseCapture: function(event) { return true; }

jquery...use.js(第 162 行)

TypeError: $.widget 不是函数[打破这个错误]

ui: function() {

Answer 1

您还需要:

• jquery.ui.button.js
• jquery.ui.dialog.js

同时将鼠标放在可拖动之前，正如 Musa 上面评论的那样，这很重要。

总结:

1. jquery.ui.core.js
2. jquery.ui.widget.js
3. jquery.ui.mouse.js
4. jquery.ui.position.js
5. jquery.ui.draggable.js
6. jquery.ui.resizable.js
7. jquery.ui.button.js
8. jquery.ui.dialog.js

但我建议不要加载所有单个文件，而是从 CDN 加载完整的 UI。

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>