1. 首頁
  2. 問答
  3. 在IE10中禁用JQuery UI對話框

在IE10中禁用JQuery UI對話框

2013-10-18 77 views
0

我有一個JQuery UI對話框，根據我網站上的數組的內容動態地填充一些div和表格元素，並在IE10中打開對話框時（工作正常）整個事情被禁用/變灰。在IE10中禁用JQuery UI對話框

最令人困惑的部分是，如果我點擊顯示它兩次的鏈接，第二次打開並且沒有禁用並且工作得很好。我點擊的鏈接運行此功能;

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>

任何幫助將是巨大的 謝謝

來源

2013-10-18 Nick G

+0

此外，頁面上沒有動態數據的所有其他對話框在未被禁用的情況下都可以正常運行。 –

回答

0

升級JQuery用戶界面和JQuery版本1.9.2和1.8.3以及CSS的，之後一些定製解決了這個問題。

來源

2013-10-22 14:07:25

相關問題

 相關問題