Javascript 按钮在IE11中不起作用_Javascript_Html_Css_Internet Explorer 11

Javascript 按钮在IE11中不起作用

javascript html css

Javascript 按钮在IE11中不起作用,javascript,html,css,internet-explorer-11,Javascript,Html,Css,Internet Explorer 11,问题: 如果单击第一行和第二行的“拒绝”按钮，第三行的“拒绝”按钮不能仅在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://ww

问题:

如果单击第一行和第二行的“拒绝”按钮，第三行的“拒绝”按钮不能仅在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>

↓

但我真的不知道原因，因为我改变了以下11点中的任何一点，问题就可以解决了

删除表格边框折叠样式

#主表{边框折叠：折叠；宽度：100%；}

删除td边框样式

#主td{边框：1px实心#EEA；填充：4px 6px；}

删除td背景样式

#主表tr.excepted td{background:#F99；}

删除表格背景样式
```
表格{background:#FEFEF1}
```
删除提交按钮
删除将“例外”css添加到tr的javascript代码
```
$j('#a_tr1_'+adId).addClass('excepted');
```
删除显示允许按钮和隐藏拒绝按钮的javascript代码
```
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
```
删除将值设置为“product_id”的javascript代码
```
$j("#product_ids").val(adId);
```
删除每行上的第一个
```
colspan
```
属性
删除每行上的第一个
```
rowspan
```
属性
删除每行上的第二个
```
colspan
```
属性

我很困惑，真的不明白是什么导致了这个问题。我希望有人能帮我，谢谢。

这肯定是个奇怪的问题在IE 11中，这似乎是一个不好的绘画问题，它阻止了与页面的交互。

请注意，单击2个拒绝按钮（顺序无关紧要）后，所有允许/拒绝按钮的悬停状态将消失。然后单击并拖动submit按钮，viola-所有按钮（和文本）现在都再次交互

将一些最佳实践应用到代码中，同时也解决了这个问题。如果您使用的是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; }