javascript - IE10 で無効になっている JQuery UI ダイアログ

Question

サイトの配列の内容に応じて、いくつかの div 要素と table 要素が動的に取り込まれる JQuery UI ダイアログがあります。

最も不可解な部分は、それを表示するリンクを 2 回クリックすると、2 回目に開いて無効にならず、問題なく動作することです。私がクリックしたリンクは、この機能を実行します。

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）でも、ダイアログと要素に対してその関数を実行する3つのインスタンスが必要です無効にしないでください。その関数が実行されるたびに、すべてを含む #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>

どんな助けでも素晴らしいでしょうありがとう