I've got code that works great in FF but only partially in IE7. The problem centers around event bubbling (correct terminology?) and the change event. Essentially, I am binding the change event to a table, and filtering for changes to checkbox and text inputs in the cells. The table contents are dynamic, which is why I bound the event to the table itself and not all the inputs (supposed to be more efficient too, if I understand the technique right). I also have a click event bound to the same table. It works fine in both browsers. Only the change event seems to cause trouble.
This code is part of an internal web app I'm developing. Since I can't let people access the app, I've recreated the same issue which (hopefully) should demonstrate the issue clearly in the following files. Sorry, I currently don't have a web host, or I would be posting a link rather than all this text. Thanks to everyone who takes the time to read this. Chad B. index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <head> <title>IE 7 Javascript test</title> <link rel="stylesheet" href="test.css" type="text/css" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="test.js"></script> </head> <body> <h2>Demonstration of event bubbling/change event bug in IE7</h2> <p><b>Works in FF and IE7:</b> Click the first table cell in each row to make the entire row green (should work in FF and IE7).</p> <p><b>Works in FF and fails in IE7:</b> Changes to inputs (checkbox and text) should change the containing cell to orange.</p> <div id="table_actions"><a href="#">Add a row</a></div> <table id="example_table"> <tbody> <tr> <th></th> <th>Check</th> <th>Text</th> </tr> <tr id="1"> <td class="row_num">1</td> <td><input type="checkbox" value="checkbox1" name="checkbox1" id="checkbox1" /></td> <td><input type="text" value="some text" name="text1" id="text1" / ></td> </tr> </tbody> </table> </body> </html> test.css: #example_table { border-collapse: collapse; background-color: #777; border: 2px solid #AAA; width: 250px; margin: 5px 10px 20px; color: white; text-align: center; } td, th { border: 2px solid #AAA; padding: 3px; } td.cell_h { background-color: orange; } tr.row_h { background-color: green; } #table_actions { margin: 20px 10px 5px; width: 250px; text-align: left; } test.js: $(document).ready(function() { $('#example_table').change(function(event) { var tgt = $(event.target); if (tgt.is('input[type=text]')) { tgt.parent().toggleClass('cell_h'); } else if (tgt.is('input[type=checkbox]')) { tgt.parent().toggleClass('cell_h'); } else { alert('You changed something else'); } }); $('#table_actions a').click(function(event) { event.preventDefault(); next_num = $('tr').length; new_row= '<tr id="'+next_num+'"><td class="row_num">'+next_num+'</ td>'; new_row += '<td><input type="checkbox" value="checkbox'+next_num+'" name="checkbox'+next_num+'" id="checkbox'+next_num+'" /></td>'; new_row += '<td><input type="text" value="some text" name="text'+next_num+'" id="text'+next_num+'" /></td></tr>'; $('#example_table tbody').append(new_row); }); $('#example_table').click(function(event) { tgt = $(event.target); if ($(tgt).is('td.row_num')) { tgt.parent().toggleClass('row_h'); } }); });
