javascript - button not work in IE11 -
problem:
if click first , second row's deny button, third row's deny button can't click in ie 11.
i tested on ie8、ie9、ie10、firefox , chrome, , not problem.
this 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 problem adjust javascript code order,like this
$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 don't know reason, because change of follow 11 points , problem can solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }delete td border style
#main td{ border:1px solid #eea; padding:4px 6px; }delete td background style
#main table tr.excepted td{ background:#f99; }delete table backgroud style
form table {background:#fefef1}delete submit button
delete javascript code add 'excepted' css tr
$j('#a_tr1_'+adid).addclass('excepted');delete javascript code show allow button , hide deny button
$j("#adallow" + adid).show(); $j("#adexcept" + adid).hide();delete javascript code set value 'product_ids'
$j("#product_ids").val(adid);delete first
colspanattribute on per rowdelete first
rowspanattribute on per rowdelete second
colspanattribute on per row
i'm quite puzzled , don't causing problem. i'm hoping can me, thank you.
this odd issue sure. it appears bad painting issue in ie 11 prevents interacting page.
take notice after click 2 deny buttons (order not matter) hover states of allow/deny buttons go away. click down , drag off of submit button, , viola - of buttons (and text) interactive again.
applying best-practices code coincidentally fixes issue well. if using jquery - should not using inline onclick attributes. main goal of jquery separate behavior content. better way bind click events add class deny , allow buttons bind click them or closest static parent (in case rows being dynamically added). also, since you're toggling class on nearest parent, may use class show/hide correct button.
new js:
$(function() { $('#main').on('click', '.button-deny', function() { $(this).closest('tr').addclass('excepted'); $("#product_ids").val($(this).data('ad-id')); }); }); additional css:
.excepted .button-deny, .button-allow { display:none; } .excepted .button-allow { display:inline-block; } relevant html update:
<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 updated fiddle - http://jsfiddle.net/7zdbb/6/
if can pinpoint specific painting issue causing issue, i'll update answer.
Comments
Post a Comment