繁体   English   中英

按钮在IE11中不起作用

[英]button not work in 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} 
  • 删除提交按钮

  • 删除将“ excepted” 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属性

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

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

如果我可以查明导致此问题的特定绘画问题,则将更新此答案。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM