2014-03-06 60 views
0

問題:按鈕不是在IE11工作

http://jsfiddle.net/7ZDbB/1/

如果我點擊第一行和第二行的否認按鈕, 第三行的否認按鈕無法點擊剛剛在IE 11

我在IE8,IE9,IE10,Firefox和Chrome上測試,而不是這個問題。

這是源代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
    #main table{ border-collapse:collapse; width:100%; } 
    #main td{ border:1px solid #EEA; padding:4px 6px; } 
    #main table tr.excepted td{ background:#F99; } 
    form table {background:#FEFEF1} 
    </style> 
    <script src="jquery.js" type="text/javascript"></script> 
</head> 
<body > 
    <div id="base"> 
    <div id="main"> 
     <form accept-charset="UTF-8" action="" method="post"> 
      <input id="product_ids" name="product_ids" type="hidden"> 
      <table> 
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>name</th> 
        <th>product info</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr id="a_tr1_d_1084"> 
        <td colspan="2"> 
         <input type="button" value="allow" id="adAllowd_1084" style="display: none;"> 
         <input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked(&#39;d_1084&#39;)"> 
        </td> 
        <td> 
         <table> 
          <tbody> 
          <tr> 
           <th>header1</th> 
           <th>header2</th> 
           <th>header3</th> 
          </tr> 
          </tbody> 
          <tbody> 
          <tr> 
           <td>subheader1</td> 
           <td>subheader2</td> 
           <td rowspan="2"> 
            other info 
           </td> 
          </tr> 
          <tr> 
           <td colspan="2"> 
            image 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </td> 
       </tr> 
       </tbody> 
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>name</th> 
        <th>product info</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr id="a_tr1_d_1085"> 
        <td colspan="2"> 
         <input type="button" value="allow" id="adAllowd_1085" style="display: none;"> 
         <input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked(&#39;d_1085&#39;)"> 
        </td> 
        <td> 
         <table> 
          <tbody> 
          <tr> 
           <th>header1</th> 
           <th>header2</th> 
           <th>header3</th> 
          </tr> 
          </tbody> 
          <tbody> 
          <tr> 
           <td>subheader1</td> 
           <td>subheader2</td> 
           <td rowspan="2"> 
            other info 
           </td> 
          </tr> 
          <tr> 
           <td colspan="2"> 
            image 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </td> 
       </tr> 
       </tbody> 
       <thead> 
       <tr> 
        <th>ID</th> 
        <th>name</th> 
        <th>product info</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr id="a_tr1_d_1090"> 
        <td colspan="2"> 
         <input type="button" value="allow" id="adAllowd_1090" style="display: none;"> 
         <input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked(&#39;d_1090&#39;)"> 
        </td> 
        <td> 
         <table> 
          <tbody> 
          <tr> 
           <th>header1</th> 
           <th>header2</th> 
           <th>header3</th> 
          </tr> 
          </tbody> 
          <tbody> 
          <tr> 
           <td>subheader1</td> 
           <td>subheader2</td> 
           <td rowspan="2"> 
            other info 
           </td> 
          </tr> 
          <tr> 
           <td colspan="2"> 
            image 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
      <div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div> 
     </form> 
<script type="text/javascript"> 
    var $j = jQuery; 

    function onDenyBtnClicked(adId) { 

    $j('#a_tr1_'+adId).addClass('excepted'); 

    $j("#adAllow" + adId).show(); 
    $j("#adExcept" + adId).hide(); 

    $j("#product_ids").val(adId); 
    } 
    // --> 
</script> 
    </div> 
    </div> 
</body> 
</html> 

我解決了這個問題,通過調整javascript代碼順序,這樣

$j('#a_tr1_'+adId).addClass('excepted'); 
$j("#adAllow" + adId).show(); 
$j("#adExcept" + adId).hide(); 

$j("#adAllow" + adId).show(); 
$j("#adExcept" + adId).hide(); 
$j('#a_tr1_'+adId).addClass('excepted');  

但我真的不知道原因,因爲我改變任何後續的11分,問題可以解決。

  • 刪除表格邊框崩潰式的

    #main table{ border-collapse:collapse; width:100%; } 
    
  • 刪除TD邊框樣式

    #main td{ border:1px solid #EEA; padding:4px 6px; } 
    
  • 刪除TD背景風格

    #main table tr.excepted td{ background:#F99; } 
    
  • 刪除表格化背景風格

    form table {background:#FEFEF1} 
    
  • 刪除提交按鈕

  • 刪除加 '例外' javascript代碼css來TR

    $j('#a_tr1_'+adId).addClass('excepted'); 
    
  • 刪除JavaScript代碼,顯示允許按鍵和隱藏否認按鈕

    $j("#adAllow" + adId).show(); 
    $j("#adExcept" + adId).hide(); 
    
  • 每個行

    刪除設定值設爲「product_ids」

    $j("#product_ids").val(adId); 
    
  • 刪除第一colspan屬性上每行

  • 刪除每個行第一rowspan屬性JavaScript代碼

  • 刪除第二colspan屬性

我很困惑,真的不明白導致問題的原因。我希望有人能幫助我,謝謝。

+0

請在plunkr ir jsfiddle上包含問題的鏈接,並嘗試在不同的瀏覽器中查看它是否僅限IE瀏覽器問題 –

+0

@JasonGoemaat對不起,我忘了寫這個。「我在IE8,IE9,IE10,Firefox和Chrome,而不是這個問題。「 – user3085280

回答

0

這確實是一個奇怪的問題。在IE 11中,這似乎是一個糟糕的繪畫問題,它會阻止與頁面進行交互。

請注意,單擊2拒絕按鈕(順序無關緊要)後,所有允許/拒絕按鈕的懸停狀態將消失。然後點擊並拖出提交按鈕,中提琴 - 所有按鈕(和文本)現在再次交互。

將一些最佳做法應用到您的代碼巧合地修復此問題。如果您使用jQuery,則不應使用內聯onclick屬性。 jQuery的主要目標是將行爲與內容分開。綁定點擊事件的更好方法是向類中添加一個類並允許按鈕,然後將點擊綁定到它們或它們最近的靜態父級(以防您的行被動態添加)。另外,由於您已經在最近的父級上切換了一個類,所以您可以使用該類來顯示/隱藏正確的按鈕。

新的JS:

$(function() { 
    $('#main').on('click', '.button-deny', function() { 
     $(this).closest('tr').addClass('excepted'); 
     $("#product_ids").val($(this).data('ad-id')); 
    }); 
}); 

附加CSS:

.excepted .button-deny, 
.button-allow { display:none; } 
.excepted .button-allow { display:inline-block; } 

相關HTML更新:

<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" /> 
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" /> 

這裏是一個更新的小提琴 - http://jsfiddle.net/7ZDbB/6/

如果我能p針對導致此問題的特定繪畫問題,我會更新此答案。

+0

我將td邊框改爲5,我找到了這個。如果點擊第二行的按鈕,subheader2的右邊框沒有出現.http://jsfiddle.net/7ZDbB/7/ – user3085280