我有一个 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 中工作得很好，但在任何版本（兼容性，7、8、9）的 IE10 中，它需要三个实例运行该函数的对话框和元素不能被禁用。我假设它与我的代码无关，因为每次运行该函数时，它都会重置正在写入包含所有内容的#indOrdersList div 的 HTML。这也是一个呈现为 divHTML 的 HTML 示例，这对我来说看起来不错。
<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>
任何帮助都会非常感谢