php - 类型错误 : $ is undefined : $. 小部件 ("ui.combobox"，{

Question

我在组合框中使用jquery，但我无法在界面中显示组合框。 firebug 中的错误如下:

类型错误:$未定义:$.widget(“ui.combobox”，{

我正在使用以下文件 jquery.ui.combobox.js:

代码:

$.widget("ui.combobox", {
    options: {
        openDialogButtonText: "+",
        dialogHeaderText: "Add option",
        saveButtonImgUrl: null,
        closeButtontext: "Ok"
    },
    _create: function() {
        var selectBox = $(this.element),
            id = selectBox.attr("id"),
            self = this;

        selectBox.addClass("ui-combobox");
        // create HTML to inject in the DOM
        this.addHtml(id, selectBox);
        // turn dialog html into a JQuery UI dialog component
        this.addDialog(id);

        // @todo set proper button height (roughly equal to select height)

        $("#" + id + "-button-opendialog").bind("click", function() {
            $("#" + id + "-editor-dialog").dialog("open");
        }).button();

        $("#" + id + "-button-save").bind("click", function() {            
            self.addOption(id, selectBox);
        }).button();

        this._init();
        return this;
    },
    addHtml: function(id, selectBox) {
        var imgHtml = "";
        if (this.options.saveButtonImgUrl != null) {
            imgHtml = '<img src="' + this.options.saveButtonImgUrl + '" alt="opslaan" />';
        }
        $('&nbsp;<button id="' + id + '-button-opendialog">' +
            this.options.openDialogButtonText +
            '</button>' +
            '<div id="' + id + '-editor-dialog" class="ui-combobox-editor">' +
            '<input id="' + id + '-newitem" type="text" />&nbsp;' +
            ' <button id="' + id + '-button-save">' +
            imgHtml + ' Opslaan' +
            ' </button>' +
            '</div>').insertAfter(selectBox);
    },
    addDialog: function(id) {
        var options = this.options;
        $("#" + id + "-editor-dialog").dialog( {
            autoOpen: false,
            modal: true,
            overlay: {
                opacity:0.5,
                background:"black"
            },
            buttons: {
                // @todo make button text configurable
                "Ok": function() {
                    $("#" + id + "-editor-dialog").dialog("close");
                    return;
                }
            },
            title: options.dialogHeaderText,
            hide: 'fold'
        });
    },
    addOption: function(id, selectBox) {
        var newItem = $("#" + id + "-newitem");
        // @todo do not allow duplicates
        if (newItem !== null && $(newItem).val().length > 0) {
            // @todo iterate over options and get the highest int value
            //var newValue = selectBox.children("option").length + 1;

            var highestInt = 0;
            selectBox.children("option").each(function(i, n) {
                var cInt = parseInt($(n).val());
                if (cInt > highestInt) {
                    highestInt = cInt;
                }
            });
            var newValue = highestInt + 1;

            var newLabel = $(newItem).val();
            selectBox.prepend("<option value='" + newValue + "' selected='selected'>" + newLabel + "</option>");
            this._trigger("addoption", {}, newValue);
            // cleanup and close dialog
            $(newItem).val("");
            $("#" + id + "-editor-dialog").dialog("close");
        } else {
            this._trigger("addoptionerror", {}, "You are required to supply a text");
        }
    },
    _init: function() {
    // called each time .statusbar(etc.) is called
    },
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
    //        $(".ui-combobox-button").remove();
    //        $(".ui-combobox-editor").remove();
    }
});

你能帮我吗？

Answer 1

消息“$未定义”意味着名为“$”的函数未在页面上的任何位置定义。因此，当执行这段代码时，遇到这一行时它不知道该怎么做。

$ 函数是由 jQuery 定义的。因此，该消息表明在执行代码时尚未加载 jQuery 库。这可能有很多用途

1. 您尚未在页面上包含完整的 jQuery 库。这可能是因为您忘记包含它，或者您只包含了一些 jQuery 扩展，例如 jQuery.UI。

   如果您不确定，请尝试将以下行添加到 HTML 中 head 元素的顶部。确保在此行之前没有放置任何 JS:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. 您已包含 jQuery，但无法加载。这可能是因为您使用的链接不正确。使用 Net Panel 仔细检查在 Firebug 中。

3. jQuery 已包含在您的页面中，但您首先包含了自己的 JS。这不起作用，因为在加载 jQuery 之前 $ 函数不会被定义，但您的代码将首先尝试执行。检查包含 JS 的顺序，并确保 jQuery 位于第一位。