jQuery.dialog() UI IE9 中的故障

Question

我实现了一个简单的 jQuery UI (1.9.2) 对话框模式，它会在用户单击时显示一个表单。它在所有现代浏览器中都按预期工作。在 IE8 中，它失败了。在 IE9 中，它只有在打开开发者工具 1 次（即按 F12）后才能工作。具体来说，对话框会打开但不会关闭。

可以肯定的是，发生了一个脚本错误，它不会冒泡到控制台，因为我对表单提交进行了验证，但也没有触发。请指教。我可以忍受不支持 IE8，但它仅在开发人员工具打开后（甚至在关闭它之后）才适用于 IE9，这让我很困惑。

Link 代码形式（第 3 页）： https://www.panelistsurvey.com/se/6321D147384607F3

着陆页 - 只需按下一步

第 1 页 - 选择是

第 2 页 - 选择 1

第 3 页 - 这是当您单击猫复选框时模式应出现的位置。

function LoadPage() {
    $('html').addClass('hidden');
    var isTestMode = ['%[TestMode]Q11LBL%'].toString().toLowerCase() === 'true';
    var css = $('<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">');
    var force_ie9 = $('<meta http-equiv="x-ua-compatible" content="IE=9" />');
    css.appendTo($('head:first'));
    if ($('html').attr('class').match(/ie9/gi)) {
        force_ie9.appendTo($('head:first'));
    }
    $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js").done(function(script, textStatus) {
        $('.ncp_img').addClass('edit').css('z-index', '50');

        $('.animal_container').each(function(index, element) {
            var dialog_title = "Cat " + (index + 1).toString();
            var handler = $('.question:first input[id]').filter(function(input_index, input_element) {
                return ToInt($(input_element).attr('id').split('_').pop()) === ToInt(index + 1);
            });
            var edit_button = $('<insert class="edit">Please select to enter information.</insert>');
            var status_icon = $('<insert class="alert"></insert>');
            var not_ready_img = $('<img src="https://www.panelistsurvey.com/static/15.1/images/warning.png" />');
            var ready_img = $('<img class="green-check" src="/AppData/1663160647/Group%20Media/green-check.jpg" />');

            $(element).dialog({
                autoOpen: false,
                modal: true,
                title: dialog_title,
                maxWidth: 450,
                minHeight: 600,
                closeOnEscape: false,
                position: {
                    my: "left top",
                    at: "left top",
                    of: $(window)
                },
                resize: function(event, ui) {
                    return false;
                },
                buttons: [{
                        text: "Save",
                        click: function() {
                            $(element).dialog('close');
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $(element).dialog('close');
                        }
                    }
                ],
                open: function(event, ui) {
                    setTimeout(function() {
                        if (ToInt($('.ui-dialog:visible').length) > 0) {
                            $(".ui-dialog:visible").position({
                                my: "left top",
                                at: "left top",
                                of: $(window)
                            });
                        }
                    }, 50);
                },
                beforeClose: function(event, ui) {
                    var cat_name = $.trim($(element).find('[type="text"]').val()).length > 0;
                    var cat_info = $(element).find('select').filter(function(select_index, select_element) {
                        return $(select_element).val() > 0;
                    }).length === $(element).find('select').length;
                    console.log('Cat name: ' + cat_name);
                    console.log('Cat info: ' + cat_info);
                    if ((cat_name === true) && (cat_info === true)) {
                        $(status_icon).html(ready_img);
                        //return false; 
                    } else {
                        $(status_icon).html(not_ready_img);
                    }
                }
            }); // close dialog setup 

            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked')) {
                    $(element).dialog('open');
                }
            }); //close event handler 

            //Force checkbox 
            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked') === false) {
                    $(evt.target).closest('.response').addClass('checked');
                    $(evt.target).attr('aria-checked', true).prop('checked', true).change();
                }
            }); //close event handler 

            $(status_icon).html(not_ready_img);

            $(handler).closest('.response').find('label').append(status_icon);
            $(handler).closest('.response').find('label').append(edit_button);

        }); //close iteration 
        $('html').removeClass('hidden');
    }).fail(function(jqxhr, settings, exception) {
        //$( "div.log" ).text( "Triggered ajaxError handler." ); 
    });

} //close LoadPage() 

function ProcessSubmit() {
    var filled_count = $('.green-check').length;
    var input_count = $('[id]').filter(function(index, element) {
        return $(element).attr('id').toLowerCase().match(/_wrapper/gi);
    }).first().find('input[id]').length;

    var cat_name_proxy = $('.cat_name_proxy').closest('.question').find('textarea');
    var name_array = [];
    var input_fields = $('.brand_name').closest('.question').find('[type="text"]').filter(function(text_input, text_element) {
        return $.trim($(text_element).val()).length > 0;
    });
    input_fields.each(function(index, element) {
        name_array.push($(element).val());
        name_array = RandomizeArray(name_array);
    });

    if (name_array.length) {
        $(cat_name_proxy).val(name_array[0].toString());
    }

    console.log('test');

    if (filled_count !== input_count) {
        alert('Please fill in the details for each cat.');
        return false;
    }

} //close ProcessSubmit() 

Answer 1

我在创建一个基于 Bootstrap 3.4.1 轮播插件的工具时再次发现了这个问题。具体发生的事情是我的代码中有一些杂散的 console.log 行。 IE9 需要 console 的 polyfill，否则会抛出错误。我在一个环境中工作，该环境会连续、同时触发多个功能，这样您将无法准确地看到错误发生的位置，但它会捕捉到它并发出警报为您指明方向。在我在 IE9 中加载控制台（F12 开发人员工具）之前，该页面不会无声地失败（似乎没有加载 JS）。所以我的特定问题与行为一致，因为 console.log 仅在您在 IE9 中打开开发人员工具时有效。一旦我删除了 console.log 引用，Bootstrap 轮播就正确加载了（与此相关的所有 JS 都正确加载）。

未来的解决方案是简单地添加一个 polyfill 以始终具有 console.log 定义以防止此问题。

TLDR：对话框没有关闭的原因是因为我在关闭时调用了 console.log，它导致了一个静默错误，因为控制台在打开之前不存在。

参见：