Question

我有一个奇怪的问题，jQuery UI对话框只在Chrome中打开一次，而在IE 10中则不会关闭。这是包含对话框本身的HTML：

<td class="editor-label">@Html.LabelWithTooltip(model => model.AuditDto.Scope)</td>
    <td class="editor-field">
        @Html.TextAreaFor(model => model.AuditDto.Scope)
        @Html.ValidationMessageFor(model => model.AuditDto.Scope)
        <div id="scope-modal-editor">
            @Html.TextArea("ScopeEditor", @Model.AuditDto.Scope, new {@class="popup-editor"})
        </div>   
    </td>
</tr>

这是我用来创建和打开对话框的javascript：

$(document).ready(function() {
    $('#scope-modal-editor').dialog({
            title: 'Edit Scope',
            autoOpen: false,
            appendTo: 'body',
            show: 'fade',
            width: 800,
            height: 600,
            modal: false,
            draggable: false,
            resizable: false,
            dialogClass: "no-close",
            buttons: [
                {
                    text: "OK",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ],
            close: function (event, ui) {
                $("#AuditDto_Scope").val($("#ScopeEditor").val());
            }
        }),
        $('#AuditDto_Scope').focus(function (e) {
            $('#scope-modal-editor').dialog('open');

        });

每次#AuditDto_Scope获得焦点时，对话框都应该打开。正如我所说，这只发生一次。

我正在使用jQuery UI 1.10.3和jQuery 2.0.3。任何人都可以在这里看到错误，或者它可能是其中一个框架中的错误吗？

更新：这是一个演示确切问题的小提琴：http://jsfiddle.net/C9KTt/1/

Answer 1

最终答案！
这段代码对于你想要实现的目标来说更好：

$('#scope').focus(function (e) {
    var $dialog = $('#scope-modal-editor');
    if($dialog.dialog( "isOpen" ) === false)
        $dialog.dialog('open');

});

这是最后的小提琴：http://jsfiddle.net/C9KTt/7/

旧答案：

如果您将其更改为：

$('#scope').click(function (e) {
    $('#scope-modal-editor').dialog('open');
});

然后它在Chrome中运行良好。问题是当你第一次聚焦textarea时，“焦点”事件会被触发3次，这必然会在对话框中引起某种错误。

这适用于Chrome和IE：http://jsfiddle.net/C9KTt/6/

请注意，我更改了jquery版本，因为2.0.2在IE 10中引发了“拒绝访问”错误

~~此外，如果你真的需要onfocus事件，你可以像这样包装它：~~

(function(){ var timeoutId; $('#scope').focus(function (e) { clearTimeout(timeoutId); timeoutId = setTimeout(function(){ $('#scope-modal-editor').dialog('open'); }, 100); }); })();

<击>

Answer 2

我不确定你的第一个问题，例如在chrome中它只打开一次。这是否意味着如果你打开并关闭它，然后尝试打开它，那么它不会再打开它？

IE遇到了对话问题。这是jQuery UI对话框的内置问题。可能正在发生的事情是（在IE中）多个DOM引用正在创建。在IE中，当对话框未关闭时，使用开发人员工具检查元素“scope-modal-editor”。我相信你会发现它的多个实例。因此，下次当您尝试关闭对话框时，该操作实际上是针对错误引用。

尝试使用

等功能

$(element).dialog("close");

和

$(element).dialog('destroy');

您也可以尝试从DOM中删除元素并通过调用动态重新创建它 $(this).dialog('destroy').remove()功能。

Answer 3

jQuery的（本）.dialog（＆＃39;破坏＆＃39）。除去（）;

jQuery UI对话框仅在Chrome中打开一次，不会在IE 10中关闭

3 个答案: