Firefox 中的 jquery 对话框问题 : can't type after opens 1st time

Question

我的 jquery 对话框在 Firefox 中无法正常工作，但 Firebug 不会给我任何错误。我的对话框在 Chrome 中运行得非常好。

情况: 我的页面上有几个 jquery 对话框，它们在不同的事件上打开。一个“添加新元素”对话框给我带来了问题。第一次打开对话框时效果很好。随后的任何时候，都无法单击或键入文本输入框。我想我每次都会通过销毁对话框来解决问题。然后每次打开它时它都会起作用。但后来我发现，如果打开任何其他对话框，然后打开这个“添加新元素”对话框，同样的事情会再次发生:无法在框中输入。

我很困惑!!!!请提供任何帮助，我们将不胜感激...我已经盯着这段代码好几天了。

这是 jquery 对话框代码:

$(function() {

    $( "#dialog-new-osc-el" ).dialog({
        resizable: false,
        autoOpen: false,
        height:300,
        width:400,
        modal: true,
        buttons: {
            "Create": function() {

*create button function stuff here* then:

            $(this).dialog("destroy");
        $( this ).dialog( "close" );
                    create_new_osc_el_dialog();
            },
            Cancel: function() {
            $(this).dialog("destroy");
                $( this ).dialog( "close" );
                create_new_osc_el_dialog();
            }
        },
            close: function() {
            $(this).dialog("destroy");
                $( this ).dialog( "close" );
                create_new_osc_el_dialog();
            }
    });
});

当单击“添加新元素”div 时，将打开对话框 - 该 div 有一个 onclick 函数:

<div class="addnewbox" onclick="addneweltoosc();">

这个 onclick 函数如下所示(为简洁起见，删除了一些代码):

    function addneweltoosc(){
                $( "#dialog-new-osc-el" ).dialog( "open" );
}

对话框的实际 HTML 相当长，以下是重要的内容:

<div id="dialog-new-osc-el" title="Create Element">

<div id="new_osc_el_type" class="pointer">
<ul>
<li onclick="new_osc_el_type_chosen('Branch');">Branch</li>
<li onclick="new_osc_el_type_chosen('Group');">Group</li>
<li onclick="new_osc_el_type_chosen('Division');">Division</li>
<li onclick="new_osc_el_type_chosen('Unit');">Unit</li>
<li onclick="new_osc_el_type_chosen('Strike Team');">Strike Team</li>
<li onclick="new_osc_el_type_chosen('Task Force');">Task Force</li>
<li onclick="new_osc_el_type_chosen('Individual Resource');">Individual Resource</li>
</ul>
</div>
<p><input class="hide" type="text" id="new_osc_el_pos_name" />
</div>

该对话框首先为用户提供一个可供选择的列表。当用户单击列表项时，将调用 new_osc_el_type_chosen 函数。此函数隐藏该列表并显示“new_osc_el_pos_name”文本输入。 这是对话框第一次打开时起作用的输入框，但之后就不再起作用。这是代码:

function new_osc_el_type_chosen(a)

{
$("#new_osc_el_type").addClass("hide");
$("#new_osc_el_pos_name").removeClass("hide");
if (a=="Branch")
{
$("#new_osc_el_pos_name").val("NAME of Branch Director");
}
document.getElementById("new_osc_el_pos_name").setSelectionRange(0,7);
$("#new_osc_el_pos_name").focus();
}

已解决!

显然，所有模态对话框都会导致它们之间发生冲突......或者其他什么。实际上，我不是 100% 确定为什么 - 但将 modal:true 更改为 modal:false 解决了我的问题。

Answer 1

我在使用 Firefox 时也遇到了同样烦人的问题。所有其他浏览器都运行良好。

我注意到定义了多个对话框的页面存在问题(所有对话框均使用 autoOpen: false 定义，因此只有用户单击触发 dialog( “打开”)

我有两个简单的对话框，每个对话框都有一个 input type="text" 和两个按钮(input type="button"，用于“取消”和“好的”)。

我可以使用任一对话框进行重现，但一个简单的测试仅适用于一个对话框:

1. 打开一个对话框。我第一次可以在输入框中输入文本。
2. 通过单击右上角的 X 关闭对话框。
3. 打开与 #1 相同的对话框。在除 Firefox 之外的所有浏览器中，我都可以在框中正常输入。在 Firefox 中，一切看起来都不错(模式层位于对话框后面，但在其他所有内容前面)，但根本不起作用。

我尝试增加输入及其对话框 div 的 z 索引。我尝试减小模态层的 z 索引。我什至删除了模态 div 元素。这些都没有效果。然后我在 jquery-ui.js 中搜索“modal”(使用 jQuery UI - v1.9.2)并发现此部分是问题所在(我确认通过注释掉它，输入问题消失了)。

问题来源，来自 jquery-ui.js (1.9.2):

// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
if ( this.options.modal ) {
    maxZ = 0;
    $( ".ui-dialog" ).each(function() {
        if ( this !== that.uiDialog[0] ) {
            thisZ = $( this ).css( "z-index" );
            if ( !isNaN( thisZ ) ) {
                maxZ = Math.max( maxZ, thisZ );
            }
        }
    });
    $.ui.dialog.maxZ = maxZ;
}

我在 jQuery UI 错误跟踪器上发现了#4309:http://bugs.jqueryui.com/ticket/4309

看来所有浏览器的问题都已修复，但问题仍然存在于 Firefox 中(至少在我使用的版本中) - 即使您仅打开/关闭/重新打开其中一个对话框，现在也会出现问题(因此其他对话框也在那里，但从未调用过“打开”)。

对我有用的黑客修复是在加载 jquery-ui.js 后执行此操作:

if ($.browser.mozilla)
{
    // fix firefox z-index bug with modal jquery UI dialog that prevents user from typing after initial modal dialog opened
    $.fn.dialogOriginal = $.fn.dialog; // save original dialog() function
    $.fn.dialog = function ()
    {
        if (!$(this).data("fixModalZIndex"))
        {
            // bind events only once
            $(this).data("fixModalZIndex", true).bind("dialogbeforeclose", function (event, ui)
            {
                // unhook modal behavior to fix firefox bug
                $(this).dialog("option", "modal", false);
            }).bind("dialogclose", function (event, ui)
            {
                var ref = $(this); // save reference for later
                setTimeout(function ()
                {
                    ref.dialog("option", "modal", true); // set back to modal, but in a timeout to avoid the z-index input bug
                    ref = null;
                }, 0);
            });
        }
        return $.fn.dialogOriginal.apply(this, arguments); // call original dialog function
    };
}

不太懂这个。可能有助于通过 maxZ 逻辑进行调试，但我不是 Firefox 粉丝，而且由于我的 hack 修复有效，我准备关闭此票证并返回修复我自己的错误，而不是修复 jQuery 的错误。希望这个信息对某人有帮助，听起来你已经决定采用 modal:false 路线(这也对我有用，但客户真的希望它是模态的......)