Question

问题：

如果我点击第一行和第二行的拒绝按钮，第三行的拒绝按钮无法在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}
```
删除提交按钮
删除将'除外'css添加到tr
的javascript代码
```
$j('#a_tr1_'+adId).addClass('excepted');
```
删除显示允许按钮和隐藏拒绝按钮的JavaScript代码
```
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
```
删除将值设置为“product_ids”
的javascript代码
```
$j("#product_ids").val(adId);
```
删除每行的第一个colspan属性
删除每行的第一个rowspan属性
删除每行的第二个colspan属性

我很困惑，真的没有得到导致问题的原因。我希望有人可以帮助我，谢谢你。

Answer 1

这肯定是一个奇怪的问题。 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; }

按钮在IE11中不起作用

1 个答案: