1

我将对话框用作搜索区域。用户单击添加图标，会弹出带有文本框和小搜索图标的对话框。单击搜索图标或在文本框中按 Enter 时，我想开始搜索。

在 FF 19 中完美运行，但在 IE 9 中，当我按下回车按钮时对话框关闭。我测试了一个独立的 HTML 页面和简单的对话框，带有文本框，IE 9 工作正常。所以我的代码中有一些东西会触发 IE 9 来关闭对话框。

我没有form打开对话框。它对结果进行 AJAX 调用，当结果返回时，对话框上有一个“添加”按钮，可通过复选框将选定的结果添加到主页下方的列表框中。

我在这里阅读了几个关于堆栈溢出问题的查询，对话框上的一个按钮绑定到输入按钮等，所以我删除了“添加”按钮。我也删除了文本框的 .keypress 代码（这会触发搜索 AJAX 功能），但仍然在按下回车按钮对话框关闭时。

我beforeClose: function( event, ui )在对话框中做了一个，并提醒了一些事件信息，当提醒框打开时，我看到close button (x)对话框上有焦点。

当我按下回车键时，我将如何追溯触发关闭按钮的原因？我试图在 IE 调试器、beforeClose 和 beforeClose 函数中设置断点，但 IE 根本不会在那里中断。而且我无法在具有更好调试器的 FF 中重新创建问题。

我的代码片段如下：

$('#dialog_add_assign_to').dialog({  
        autoOpen: false, 
        closeOnEscape: false,
        /*open: function(event, ui) { $(".ui-dialog-titlebar-close", $(this).parent()).hide(); },*/

        modal: true,  
        resizable: true,
        minWidth: 600,
        buttons: {  
            "Add": function() {
                $('.dialog_add_assign_to_result_checkboxes').each(function() { 
                    if ($(this).is(':checked') ) {
                        $('#' + $('#dialog_add_assign_to').data("type") + '_id').append('<option value="' + $(this).attr('id') + '">' + $(this).attr('ref_name') + ' (' + $(this).attr('ref_country') + ')</option>'); 
                    }
                 });
            },
            "cancel": function() {
                $(this).dialog( "close" );
            }
        },
        beforeClose: function( event, ui ) {
            $('#dialog_add_assign_to_result > tbody:last').empty();
            alert(event.originalEvent.originalEvent  );
            event.preventDefault();
        }
    });  


    //When user presses enter, fire off the search function (search icon click)
    $("#txt_search").keypress(function(e) {
        if (e.keyCode == $.ui.keyCode.ENTER) {
              $("#search_assigned_to").click();
        }
    });

    //Click on the icon to start AJAX search call
    $("#search_assigned_to").click(function () {           
        $('#dialog_add_assign_to_result > tbody:last').empty();

        $.ajax({
            type :'GET',
            url : 'get_ajax_data.php?type=search_' + $('#dialog_add_assign_to').data("type") + '&search_text=' + $("#txt_search").val(),
            dataType : 'xml',
            success : function(xml_results) {
                $('#dialog_add_assign_to_result > tbody:last').append('<tr><td><?=_NAME?></td><td><?=_COUNTRY?></td><td></td></tr>');
                console.log(xml_results);
                $(xml_results).find('search_' + $('#dialog_add_assign_to').data("type")).each(function(){
                    var int_id = $(this).find("id").text();
                    var str_name = $(this).find("name").text();
                    var str_country = $(this).find("country_name").text();

                    if (int_id == '----') {
                        var str_tmp =  '';
                    } else {
                        var str_tmp = '<input type="checkbox" class="dialog_add_assign_to_result_checkboxes" ref_name="' + str_name + '" ref_country="' + str_country + '"  id="' + int_id + '" />';
                    }

                    $('#dialog_add_assign_to_result > tbody:last').append('<tr><td>' + str_name + '</td><td>' + str_country + '</td><td>' + str_tmp + '</td></tr>');
                });

            }
        });
    });

对话框 HTML：

<div id="dialog_add_assign_to">
    <input type="text" id="txt_search" name="txt_search" /><img class="img_16" id="search_assigned_to" src="/images/tray/magnify.gif" />
    <table id="dialog_add_assign_to_result"><tbody></tbody></table>
</div>
4

1 回答 1

2

首先你可以试试“event.preventDefault();” 在“beforeClose”函数中查看是否停止关闭。在使用 chrome 调试器检查“beforeClose”函数中的“event.originalEvent.originalEvent”时，我看到当我使用“Esc”键时，它添加了“27”的“keyCode”属性和“keydown”的“type”属性. 当您单击右上角的“x”时，它会添加“click”的“type”属性，它会告诉您“srcElement”是什么，并且它显然是一个 mouseevent。

我建议你在那里寻找线索，应该告诉你到底是什么关闭了对话框。您提到 IE 不会在“beforeClose”事件中中断？您可以登录以控制来自该事件的任何数据或发出任何警报吗？

于 2013-03-08T09:09:52.430 回答