2

我在组合框中使用 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();
    }
});

你能帮我么？

4

1 回答 1

2

消息“$ is undefined”意味着在页面的任何地方都没有定义名为“$”的函数。因此，当执行此代码时，遇到此行时它不知道该怎么做。

$ 函数由 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，但无法加载。这可能是因为您使用的链接不正确。使用Firebug中的网络面板仔细检查。

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

于 2013-10-24T10:15:40.137 回答