[英]button not work in IE11
问题:
如果单击第一行和第二行的“拒绝”按钮,则第三行的“拒绝”按钮不能仅在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('d_1084')">
</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('d_1085')">
</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('d_1090')">
</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.