javascript - Firefox 中的 Jquery 选择器

Question

我正在学习 javascript 揭示原型(prototype)模式。我有两个脚本 1 定义一个对话框，另一个使用它。除了这个 javascript 抛出 $(dialogDiv) is not defined in Firefox 之外，一切似乎都运行良好？但是，该脚本在 IE 和 Chrome 中运行良好。

揭示原型(prototype):

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;
        });
    }
});

Answer 1

由于您有一个带有 id 的元素，IE(以及试图与 IE 兼容的 Chrome)使用每个 id 在 window 上创建属性:

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

Firefox 不会这样做，这就是它在该浏览器中失败的原因。无论如何，您应该使用 this.dialogDiv，因为它适合您的模型。此外，window.elementId 属性是非标准的，不应依赖。