Question

我正在使用对话框作为搜索区域。用户点击添加图标，弹出对话框，文本框和小搜索图标。单击搜索图标或在文本框中按下输入时，我想开始搜索。

在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中重新创建问题，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>

Answer 1

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

我建议您查看线索，应该告诉您关闭对话框的确切内容。你提到IE在“beforeClose”事件中没有中断？您可以登录以控制该事件的任何数据或进行任何警报吗？

Jquery对话框关闭IE

1 个答案: