jQuery.dialog() IE9 中的 UI 故障

Question

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

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

链接到代码表单(第 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 轮播插件的工具时再次发现了这个问题。 具体发生的事情是我的代码中有一些杂散的控制台.log行。 IE9 需要控制台的填充代码，否则会引发错误。 我正在一个连续触发多个功能的环境中工作，这样你将无法准确地看到错误发生的位置，但它会捕捉到它并抛出警报给你方向。 在我在IE9中加载控制台(F12开发人员工具)之前，页面不会静默失败(似乎没有加载JS)。 所以我的特殊问题与行为一致，因为控制台.log仅在您在 IE9 中打开开发人员工具时才有效。 删除控制台.log引用后，引导程序轮播正确加载(所有 JS 都正确加载)。

未来的解决方案是简单地添加一个填充物以始终具有控制台.log定义以防止此问题。

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

请参阅：https://stackoverflow.com/a/15771110/5076162