按钮在IE11中不起作用
[英]button not work in IE11
问题描述
Problem: 
问题：
http://jsfiddle.net/7ZDbB/1/ http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button, the third row's deny button can't click just in IE 11. 如果单击第一行和第二行的“拒绝”按钮，则第三行的“拒绝”按钮不能仅在IE 11中单击。
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem. 我在IE8，IE9，IE10，Firefox和Chrome上测试过，不是这个问题。
This is source code. 这是源代码。
<!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>
I solved this problem by adjust javascript code order,like this 我通过调整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');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved. 但是我真的不知道原因，因为我改变了以下11点中的任何一项，问题就可以解决。
delete table border-collapse style
删除表格边框折叠样式 #main table{ border-collapse:collapse; width:100%; }delete td border style
删除td边框样式 #main td{ border:1px solid #EEA; padding:4px 6px; }delete td background style
删除td背景样式 #main table tr.excepted td{ background:#F99; }delete table backgroud style
删除表格背景样式 form table {background:#FEFEF1}delete submit button
删除提交按钮 delete javascript code that add 'excepted' css to tr
删除将“ excepted” css添加到tr的javascript代码 $j('#a_tr1_'+adId).addClass('excepted');delete javascript code that show allow button and hide deny button
删除显示“允许”按钮和隐藏“拒绝”按钮的javascript代码 $j("#adAllow" + adId).show(); $j("#adExcept" + adId).hide();delete javascript code that set value to 'product_ids'
删除将值设置为“ product_ids”的javascript代码 $j("#product_ids").val(adId);delete first
colspanattribute on per row删除每行的第一个colspan属性delete first
rowspanattribute on per row删除每行的第一个rowspan属性delete second
colspanattribute on per row删除每行的第二个colspan属性
I'm quite puzzled and really don't get what is causing the problem. 我很困惑，真的不明白是什么导致了问题。 I'm hoping someone can help me, thank you. 我希望有人能帮助我，谢谢。
1 个解决方案
解决方案1
0 2014-03-11 04:18:06
This is an odd issue for sure. 这肯定是一个奇怪的问题。 It appears to be a bad painting issue in IE 11 that prevents interacting with the page. 在IE 11中，这似乎是一个严重的绘画问题，它阻止了与页面的交互。
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. 请注意，单击2个“拒绝”按钮（顺序无关紧要）后，所有“允许/拒绝”按钮的悬停状态都会消失。 Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again. 然后单击并拖下提交按钮，中提琴-所有按钮（和文本）现在又可以交互。
Applying some best-practices to your code coincidentally fixes this issue as well. 对您的代码应用一些最佳实践也可以同时解决此问题。 If you are using jQuery - you should not be using inline onclick attributes. 如果您使用的是jQuery，则不应使用内联onclick属性。 A main goal of jQuery is to separate behavior from content. jQuery的主要目标是将行为与内容分开。 A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). 绑定单击事件的一种更好的方法是在拒绝中添加一个类，并允许按钮将单击绑定到它们或它们的最接近的静态父对象（以防动态添加行）。 Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button. 另外，由于您已经在最近的父级上切换了一个类，因此您也可以使用该类来显示/隐藏正确的按钮。
New JS: 新的JS：
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS: 其他CSS：
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update: 相关的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" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/ 这是更新的小提琴-http: //jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer. 如果我可以查明导致此问题的特定绘画问题，则将更新此答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.