jQuery UI 小部件没有方法 'uniqueId'答案

【问题标题】：jQuery UI Widget has no method 'uniqueId'jQuery UI 小部件没有方法 'uniqueId'
【发布时间】：2023-03-26 21:30:01
【问题描述】：

我正在尝试让 jQuery UI 小部件在我的 Web 应用程序中工作
我从原始demo 获得了所有文件，并且基本上尽我所能，因此代码和文件与演示版中的几乎相同。

并且一直得到这个错误：Uncaught TypeError: Object [object Object] has no method 'uniqueId'

这里是js代码：

$(function () {
    var date = new Date();
    date.setDate(date.getDate() + 1);
    $(".calendar", ".add-item").datepicker({
        showAnim: "drop",
        dateFormat: "yy-dd-mm",
        minDate: date
    });

    $("#bar1").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        }
    });

    $(".menubar-icons").menubar({
        autoExpand: true,
        menuIcon: true,
        buttons: true,
        position: {
            within: $("#demo-frame").add(window).first()
        }
    });

    $("#bar3").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        },
        items: ".menubarItem",
        menuElement: ".menuElement"
    });
});

这里是包含的文件：

<script src="@Url.Content("~/content/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery-ui-1.8.21.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.dataTables.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.button.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.menu.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.menubar.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/main.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/content/js/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/content/css/main-admin.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/css/jquery.dataTables.css")" rel="stylesheet" type="text/css" />

这里是纯html：

<div class="header">
            <div class="demo">
                <ul id="bar1" class="menubar">
                    <li><a href="#File">File</a>
                        <ul>
                            <li><a href="#Open...">Open...</a></li>
                            <li class="ui-state-disabled">Open recent...</li>
                            <li><a href="#Save">Save</a></li>
                            <li><a href="#Save%20as...">Save as...</a></li>
                            <li><a href="#Close">Close</a></li>
                            <li><a href="#Quit">Quit</a></li>
                        </ul>
                    </li>
                    <li><a href="#Edit">Edit</a>
                        <ul>
                            <li><a href="#Copy">Copy</a></li>
                            <li><a href="#Cut">Cut</a></li>
                            <li class="ui-state-disabled">Paste</li>
                        </ul>
                    </li>
                    <li><a href="#View">View</a>
                        <ul>
                            <li><a href="#Fullscreen">Fullscreen</a></li>
                            <li><a href="#Fit%20into%20view">Fit into view</a></li>
                            <li><a href="#Encoding">Encoding</a>
                                <ul>
                                    <li><a href="#Auto-detect">Auto-detect</a></li>
                                    <li><a href="#UTF-8">UTF-8</a></li>
                                    <li><a href="#UTF-16">UTF-16</a>
                                        <ul>
                                            <li><a href="#Option%201">Option 1</a></li>
                                            <li><a href="#Option%202">Option 2</a></li>
                                            <li><a href="#Option%203">Option 3</a></li>
                                            <li><a href="#Option%204">Option 4</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#Customize...">Customize...</a></li>
                        </ul>
                    </li>
                </ul>
                <ul id="bar2" class="menubar-icons">
                    <li><a href="#File">File</a>
                        <ul>
                            <li><a href="#Open...">Open...</a></li>
                            <li class="ui-state-disabled">Open recent...</li>
                            <li><a href="#Save">Save</a></li>
                            <li><a href="#Save%20as...">Save as...</a></li>
                            <li><a href="#Close">Close</a></li>
                            <li><a href="#Quit">Quit</a></li>
                        </ul>
                    </li>
                    <li><a href="#Edit">Edit</a>
                        <ul>
                            <li><a href="#Copy">Copy</a></li>
                            <li><a href="#Cut">Cut</a></li>
                            <li class="ui-state-disabled">Paste</li>
                        </ul>
                    </li>
                    <li><a href="#View">View</a>
                        <ul>
                            <li><a href="#Fullscreen">Fullscreen</a></li>
                            <li><a href="#Fit%20into%20view">Fit into view</a></li>
                            <li><a href="#Encoding">Encoding</a>
                                <ul>
                                    <li><a href="#Auto-detect">Auto-detect</a></li>
                                    <li><a href="#UTF-8">UTF-8</a></li>
                                    <li><a href="#UTF-16">UTF-16</a>
                                        <ul>
                                            <li><a href="#Option%201">Option 1</a></li>
                                            <li><a href="#Option%202">Option 2</a></li>
                                            <li><a href="#Option%203">Option 3</a></li>
                                            <li><a href="#Option%204">Option 4</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#Customize...">Customize...</a></li>
                        </ul>
                    </li>
                </ul>
                <div id="bar3" class="menubar">
                    <div class="menubarItem">
                        <a href="#File">File</a>
                        <div class="menuElement">
                            <div>
                                <a href="#Open...">Open...</a></div>
                            <div class="ui-state-disabled">
                                Open recent...</div>
                            <div>
                                <a href="#Save">Save</a></div>
                            <div>
                                <a href="#Save%20as...">Save as...</a></div>
                            <div>
                                <a href="#Close">Close</a></div>
                            <div>
                                <a href="#Quit">Quit</a></div>
                        </div>
                    </div>
                    <div class="menubarItem">
                        <a href="#Edit">Edit</a>
                        <div class="menuElement">
                            <div>
                                <a href="#Copy">Copy</a></div>
                            <div>
                                <a href="#Cut">Cut</a></div>
                            <div class="ui-state-disabled">
                                Paste</div>
                        </div>
                    </div>
                    <div class="menubarItem">
                        <a href="#View">View</a>
                        <div class="menuElement">
                            <div>
                                <a href="#Fullscreen">Fullscreen</a></div>
                            <div>
                                <a href="#Fit%20into%20view">Fit into view</a></div>
                            <div>
                                <a href="#Encoding">Encoding</a>
                                <div class="menuElement">
                                    <div class="ui-state-disabled">
                                        Auto-detect</div>
                                    <div>
                                        <a href="#UTF-8">UTF-8</a></div>
                                    <div>
                                        <a href="#UTF-16">UTF-16</a>
                                        <div class="menuElement">
                                            <div>
                                                <a href="#Option%201">Option 1</a></div>
                                            <div>
                                                <a href="#Option%202">Option 2</a></div>
                                            <div class="ui-state-disabled">
                                                Option 3</div>
                                            <div>
                                                <a href="#Option%204">Option 4</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <a href="#Customize...">Customize...</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

【问题讨论】：

为什么要多次引用同一个文件？您的jquery-ui-1.8.21.custom.min.js 文件中还包含什么内容？

标签： javascript jquery html jquery-ui jquery-widgets

【解决方案1】：

删除包含：

<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

【讨论】：

认为目前没有足够的信息可以这么说。据我们所知，自定义文件可能不包含任何内容。
他正在复制 jquery ui 方法，将所有这些方法都包含在一个“自定义”js 文件和单独的文件中。
可能是的，但我们不知道自定义文件中有什么，因此它被称为custom
我们知道，因为有一个指向他的网站的链接。

【解决方案2】：

uniqueId 是 jQuery 1.9.x 引入的一个新函数。我假设您正在使用带有 jQuery 1.8.x 的 dev Widget（又名来自 GitHub 的 master 分支）。

【讨论】：

+1 用于实际解释问题的根源 :) 谢谢！

【解决方案3】：

在我看来，您没有包含所有必需的源 (.js) 文件。要么是那个，要么是你的 URL 是错误的。

从这个页面只包含一个 UI 包可能更容易： http://jqueryui.com/download/ 这样您就知道您拥有所有必需的来源？

【讨论】：