我实现了一个简单的jQuery UI（1.9.2）对话框模式，当用户单击时将显示一个表单。它可以在所有现代浏览器中正常运行。在IE8中，它失败。在IE9中，它只有在打开开发人员工具1次（即按F12键）后才能工作。具体来说，该对话框将打开，但不会关闭。
可以肯定的是，发生了一个脚本错误，该错误不会冒泡到控制台，因为我对表单提交进行了验证，但也不会触发。请指教。我不能忍受IE8的支持，但事实上只有在打开开发人员工具（甚至在关闭开发人员工具之后），它才能对IE9起作用，这真让我感到困惑。
链接到代码表（第3页）： https://www.panelistsurvey.com/se/6321D147384607F3
着陆页-只需按下一步
第1页-选择是
第2页-选择1
第3页-这是当您单击cat复选框时模态应该出现的地方。
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()
答案 0 :(得分：0)
我在创建一个构建在 Bootstrap 3.4.1 轮播插件之上的工具时再次发现了这个问题。具体发生的事情是我的代码中有一些杂散的 console.log 行。 IE9 需要为控制台添加 polyfill，否则会抛出错误。我在一个环境中工作，同时连续触发多个功能，这样您将无法准确看到错误发生的位置，但它会捕获它并发出警报以指示您的方向。在我在 IE9 中加载控制台（F12 开发人员工具）之前，页面不会静默失败（似乎没有加载 JS）。所以我的特定问题与行为一致，因为 console.log 仅在您在 IE9 中打开开发人员工具时才有效。一旦我删除了 console.log 引用，Bootstrap carousel 就会正确加载（所有 JS 都正确加载）。
未来的解决方案是简单地添加一个 polyfill 来始终定义 console.log 以防止出现此问题。
TLDR：对话框没有关闭的原因是因为我在关闭时调用了 console.log 并且它导致了无提示错误，因为控制台在打开之前不存在。