0

我有一个 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;'>&nbsp;</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;'>&nbsp;</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;'>&nbsp;</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;'>&nbsp;</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;'>&nbsp;</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;'>&nbsp;</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>

任何帮助都会非常感谢

4

1 回答 1

0

将 JQuery UI 和 JQuery 版本升级到 1.9.2 和 1.8.3 以及 CSS，经过一些定制解决了这个问题。

于 2013-10-22T14:07:25.273 回答