2

我有一个奇怪的问题，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/

4

3 回答 3

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 中运行良好。问题是当您第一次关注文本区域时，“焦点”事件被触发了 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);
    });
})();

于 2013-09-18T18:10:05.280 回答
1

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

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

尝试使用类似的功能

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

和

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

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

于 2013-09-18T18:11:33.413 回答
1

jQuery(this).dialog('destroy').remove();

于 2015-03-06T09:26:23.727 回答