javascript - Firefox中的Jquery选择器

我正在学习javascript揭示原型模式。我有两个脚本1定义了一个对话框，另一个使用了它。一切似乎一切正常，除了在Firefox中未定义此JavaScript抛出$（dialogDiv）之外？但是，该脚本在IE和Chrome中运行良好。

揭示原型：

var Sandbox = Sandbox || { };
Sandbox.UI = Sandbox.UI || { };

Sandbox.UI.AjaxContentModalDialog = function(elementId, dialogOptions) {
    this.dialogDiv = elementId;
    this.options = dialogOptions;
};

Sandbox.UI.AjaxContentModalDialog.prototype = function () {

    var open = function (methodName, url) {
        $(dialogDiv).css("overflow", "hidden");
        $(dialogDiv).dialog({
            width: this.options.width,
            height: this.options.height,
            autoOpen: false,
            resizable: false,
            modal: true,
            title: this.options.title,

            buttons: {
                Save: function () {
                    var form = $(options.formToPost);
                    $.ajax({
                        type: "POST",
                        url: form.attr('action'),
                        data: form.serialize(),
                        success: function (data, status, xhr) {
                            if (data.IsValid) {
                                $(dialogDiv).dialog('close');
                                $(dialogDiv).empty();
                                $(options.divToUpdate).empty();
                                $(options.divToUpdate).html(data.View);
                            } else {
                                $("#errorDiv").html(data.Message + "<br/>");
                            }
                        }
                    });
                },

                Cancel: function () {
                    $(dialogDiv).dialog('close');
                    $(dialogDiv).empty();
                }
            }
        });
        $.ajax(
            {
                Type: methodName,
                url: url,
                success: function (data, status, xhr) {
                    openDialog(data);
                }
            });

        function openDialog(data) {
            $(dialogDiv).html(data);
            $(dialogDiv).dialog('open');
        }
    };

    return {
        open: open
    };

} ();

消费者：

"use strict";

var options = { title: 'Edit User Profile Setting Value',
    height: 180,
    width: 375,
    formToPost: '#userProfileSettingForm',
    divToUpdate: '#userProfileDetail',
    buttons: [{ text: "Ok" }, { text: "Cancel"}]
};

var dialog;
dialog = new Sandbox.UI.AjaxContentModalDialog('#dialogDiv', options);

$(document).ready(function () {
    disableInheritLinks();
    $('.Sandbox-udsActionLink').live("click", function (e) {

        e.preventDefault();
        dialog.open('get', this.href);
        return false;
    });


    function disableInheritLinks() {
        $('.Sandbox-disabled').each(function (item) {
            this.href = '';
        });


        $('.Sandbox-disabled').live("click", function (e) {
            e.preventDefault();
            this.href = '';
            console.log("disalbed: " + this.href);
            return false;
        });
    }
});

最佳答案

由于您有一个带有ID的元素，因此IE（为了与IE兼容，Chrome和Chrome尝试在window上使用每个ID创建属性：

window.dialogDiv //points to the element with id=dialogDiv

Firefox不执行此操作，这就是为什么该浏览器无法运行的原因。无论如何，您都应该使用this.dialogDiv，因为它适合您的模型。此外，window.elementId属性是非标准的，不应依赖。