我有一个JQuery UI对话框，根据我网站上的数组内容动态填充一些div和table元素，而在IE10中，当我打开对话框（工作正常）时，整个东西被禁用/变灰进行。
最令人费解的部分是，如果我点击显示它的链接两次，第二次打开并且没有禁用并且工作得很好。我点击的链接运行此功能;
function viewIndividualReports(){
$("#indOrdersList").html('');
var divHTML = "<table style='width: 685px;' cellpadding='0' cellspacing='0'><tr><td style='width:20px;'><a href='#' class='toggleAllReports'></a></td><td style='vertical-align:middle; width:315px; text-align:left; font-weight:bold; font-size:9pt;'>Report</td><td style='font-weight:bold; font-size:9pt; width:140px; text-align:right; padding-right:4px; vertical-align:middle;'>Date/Time Run</td><td style='font-weight:bold; width:150px; font-size:9pt; text-align:left; padding-left:6px; vertical-align:middle;'>Status</td><td style='font-weight:bold; font-size:9pt; width:70px; vertical-align:middle;'>Delete</td></tr></table>";
var d = new Date();
var strDate = (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
var strTime = d.toLocaleTimeString();
var Report1 = reportOneArray.length;
var Report2 = reportTwoArray.length;
divHTML += "<div id='allReports'>";
if(Report1 > 0){
divHTML += "<table class='sampleOneReports' style='width: 685px;' cellpadding='0' cellspacing='0'><tr style='background-color:#D8D8D8;'><td style='vertical-align:middle; width:20px;'><a href='#' class='toggleReportOne'></a></td><td style='width:315px; text-align:left; font-weight:bold; vertical-align:middle;'>Sample Report One</td><td style='font-weight:bold; width:140px; text-align:right; vertical-align:middle;'>" + strDate + "," + strTime + "</td><td style='font-weight:bold; width:150px; padding-left:6px; text-align:left; vertical-align:middle;'><a href='#' class='viewIndReports'>View All in One PDF</a></td><td style='width:70px; vertical-align:middle;'><input type='checkbox' class='delAllSampleOne'/> All</td></tr></table><div id='sampleOneReports'><table style='width: 685px;' cellpadding='0' cellspacing='0'>";
for(var i = 0; i < reportOneArray.length; i = i +1 ){
divHTML += "<tr style='background-color:#D8D8D8;'><td style='width:20px;'></td><td style='width:315px; text-align:left;'>" + reportOneArray[i] + "</td><td style='width: 140px; text-align:right; padding-right:4px;'> </td><td style='width:150px; padding-left:6px; text-align:left;'><a href='#' class='viewIndReports'>View</a></td><td style='width:70px;'><input type='checkbox' id='del" + $(this).attr('advID') + "'class='delOne'/></td></tr>";
}
divHTML += "</table></div>";
}
if(Report2 > 0){
divHTML += "<table class='sampleTwoReports' style='width: 685px;' cellpadding='0' cellspacing='0'><tr><td style='vertical-align:middle; width:20px;'><a href='#' class='toggleReportTwo'></a></td><td style='width:315px; text-align:left; font-weight:bold; vertical-align:middle;'>Sample Report Two</td><td style='font-weight:bold; width:140px; text-align:right; vertical-align:middle;'>" + strDate + "," + strTime + "</td><td style='font-weight:bold; width:150px; text-align:left; padding-left:6px; vertical-align:middle;'><a href='#' class='viewIndReports'>View All in One PDF</a></td><td style='width:70px; vertical-align:middle;'><input type='checkbox' class='delAllSampleTwo'/> All</td></tr></table><div id='sampleTwoReports'><table style='width: 685px;' cellpadding='0' cellspacing='0'>";
for(var i = 0; i < reportTwoArray.length; i = i+1){
divHTML += "<tr><td style='width:20px;'></td><td style='padding-top: 4px; width:315px; text-align:left;'>" + reportTwoArray[i] + "</td><td style='width: 140px; text-align:right; padding-right:4px;'> </td><td style='width:150px; text-align:left; padding-left:6px;'><a class='viewIndReports' href='#' target='_blank'>View</a></td><td style='width:70px;'><input type='checkbox' id='del" + $(this).attr('advID') + "' class='delTwo'/></td></tr>";
}
divHTML += "</table></div>";
}
divHTML += "</div>";
$("#indOrdersList").html(divHTML);
INDIVIDUAL_REPORTS.dialog('open');
}
我知道它是一大堆动态表和东西，但它在IE9中运行得很好，但在任何版本的IE10中（兼容性，7,8,9）它需要三个实例来运行该对话框的功能和元素不被禁用。我假设它与我的代码没有关系，因为每次该函数运行时它都会重置正在写入包含所有内容的#indOrdersList div的HTML。这里也是一个HTML渲染为divHTML的例子，对我来说很好看。
<table style='width: 685px;' cellpadding='0' cellspacing='0'>
<tr>
<td style='width:20px;'>
<a href='#' class='toggleAllReports'></a>
</td>
<td style='vertical-align:middle; width:315px; text-align:left; font-weight:bold; font-size:9pt;'>Report</td>
<td style='font-weight:bold; font-size:9pt; width:140px; text-align:right; padding-right:4px; vertical-align:middle;'>Date/Time Run</td>
<td style='font-weight:bold; width:150px; font-size:9pt; text-align:left; padding-left:6px; vertical-align:middle;'>Status</td>
<td style='font-weight:bold; font-size:9pt; width:70px; vertical-align:middle;'>Delete</td>
</tr>
</table>
<div id='allReports'>
<table class='sampleOneReports' style='width: 685px;' cellpadding='0' cellspacing='0'>
<tr style='background-color:#D8D8D8;'>
<td style='vertical-align:middle; width:20px;'>
<a href='#' class='toggleReportOne'></a>
</td>
<td style='width:315px; text-align:left; font-weight:bold; vertical-align:middle;'>Sample Report One</td>
<td style='font-weight:bold; width:140px; text-align:right; vertical-align:middle;'>10/18/2013,11:49:05 AM</td>
<td style='font-weight:bold; width:150px; padding-left:6px; text-align:left; vertical-align:middle;'>
<a href='#' class='viewIndReports'>View All in One PDF</a>
</td>
<td style='width:70px; vertical-align:middle;'>
<input type='checkbox' class='delAllSampleOne'/> All
</td>
</tr>
</table>
<div id='sampleOneReports'>
<table style='width: 685px;' cellpadding='0' cellspacing='0'>
<tr style='background-color:#D8D8D8;'>
<td style='width:20px;'></td>
<td style='width:315px; text-align:left;'>AMES JOHN</td>
<td style='width: 140px; text-align:right; padding-right:4px;'> </td>
<td style='width:150px; padding-left:6px; text-align:left;'><a href='#' class='viewIndReports'>View</a></td>
<td style='width:70px;'>
<input type='checkbox' id='delundefined'class='delOne'/>
</td>
</tr>
<tr style='background-color:#D8D8D8;'>
<td style='width:20px;'></td>
<td style='width:315px; text-align:left;'>CHIN KIM</td>
<td style='width: 140px; text-align:right; padding-right:4px;'> </td>
<td style='width:150px; padding-left:6px; text-align:left;'>
<a href='#' class='viewIndReports'>View</a>
</td>
<td style='width:70px;'>
<input type='checkbox' id='delundefined'class='delOne'/>
</td>
</tr>
</table>
</div>
<table class='sampleTwoReports' style='width: 685px;' cellpadding='0' cellspacing='0'>
<tr>
<td style='vertical-align:middle; width:20px;'><a href='#' class='toggleReportTwo'></a></td>
<td style='width:315px; text-align:left; font-weight:bold; vertical-align:middle;'>Sample Report Two</td>
<td style='font-weight:bold; width:140px; text-align:right; vertical-align:middle;'>10/18/2013,11:49:05 AM</td>
<td style='font-weight:bold; width:150px; text-align:left; padding-left:6px; vertical-align:middle;'>
<a href='#' class='viewIndReports'>View All in One PDF</a>
</td>
<td style='width:70px; vertical-align:middle;'><input type='checkbox' class='delAllSampleTwo'/> All</td>
</tr>
</table>
<div id='sampleTwoReports'>
<table style='width: 685px;' cellpadding='0' cellspacing='0'>
<tr>
<td style='width:20px;'></td>
<td style='padding-top: 4px; width:315px; text-align:left;'>AMES JOHN</td>
<td style='width: 140px; text-align:right; padding-right:4px;'> </td>
<td style='width:150px; text-align:left; padding-left:6px;'>
<a class='viewIndReports' href='#' target='_blank'>View</a>
</td>
<td style='width:70px;'><input type='checkbox' id='delundefined' class='delTwo'/></td>
</tr>
<tr>
<td style='width:20px;'></td>
<td style='padding-top: 4px; width:315px; text-align:left;'>CHIN KIM</td>
<td style='width: 140px; text-align:right; padding-right:4px;'> </td>
<td style='width:150px; text-align:left; padding-left:6px;'>
<a class='viewIndReports' href='#' target='_blank'>View</a>
</td>
<td style='width:70px;'><input type='checkbox' id='delundefined' class='delTwo'/></td>
</tr>
</table>
</div>
</div>
任何帮助都会很棒 谢谢
答案 0 :(得分：0)
在一些自定义解决了这个问题之后，将JQuery UI和JQuery版本升级到1.9.2和1.8.3以及CSS。