IE10中禁用了JQuery UI对话框

Nick G 发表于 Dev

尼克·G

我有一个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中它可以正常工作，但是在任何版本的IE10中（兼容性7、8、9），它需要三个实例来运行对话框和元素的功能不被禁用。我假设它与我的代码无关，因为每次运行该函数时，它都会重置正在写入包含所有内容的#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>

任何帮助将是巨大的谢谢

尼克·G

经过一些自定义解决此问题后，将JQuery UI和JQuery版本以及CSS升级到1.9.2和1.8.3。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。