jQuery UI 对话框打开导致 IE9 中的显示兼容性问题

Question

有一个 jquery-ui 对话框需要在页面加载时打开。相关代码在两个文件中。

**FileA**
$(function()
{
   //some initialization code here

    $("#date-range-dialog").dialog({
        modal: true, 
        autoOpen: false, 
        buttons: 
        {
            "Ok": function() 
            {
               //some code here
            }
        }
    });
});

**FileB**
$(function()
{
   //some code

   $('#date-range-dialog').dialog('open');
});

这适用于 Chrome 和 Firefox。但是对于 IE9，打开的对话框事件/语句会导致浏览器将显示切换到兼容性视图。

对话框的标记是：

<div id="date-range-dialog" title="Date Range">
    <div class="form-horizontal">
        <div class="control-group">
            <label class="control-label">From</label>
            <div class="controls">
                <input type="text" id="dt-from" class="input-small" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">To</label>
            <div class="controls">
                <input type="text" id="dt-to" class="input-small" />
            </div>
        </div>
    </div>
</div>

应用程序正在使用 Twitter Bootstrap 2.0.4、jQuery 1.8.3、jQuery UI 1.9.2。 目前没有手动 CSS。

一个奇怪的观察是，如果打开对话框的语句被注释掉，它在 IE9 中也可以工作。如果有按钮调用此语句，一切都很好：

$(".date-range").click(function()
{
    $("#date-range-dialog").dialog("open");
});

所以，只有在尝试直接在$(function(){}); 中打开对话框时才会出现问题

我也尝试将对话框打开语句放在$(window).load() 事件中。它在 IE9 中仍然失败。

Answer 1

您是否尝试将文件 B 中的 jQuery 放入 $(document).ready({}); 子句中？我猜想，也许 IE 在文件 A 中完成初始化之前正在运行文件 B 中的代码。这可以解释为什么它在您的点击功能中有效，而不是在您的文件 B 功能中。