I did eventually figure out how to get where I wanted to go. The key was capturing the blur event on each field rather than onChange. The change event does not bubble, period. I had to make a few adjustments to my code to simulate an change using the blur event, but it was pretty straightforward once I stopped trying to make onchange work.
Wish I had known onchange's behaviour in IE before I spent several weeks pulling my hair out. Thanks for the reply. chad On Sep 15, 11:58 am, KSnyder <[EMAIL PROTECTED]> wrote: > Chad- > > I haven't had this problem for a while but you might want to try > adding a "return false;" at the end of each event as that seems to > help for me. For example, I've adopted the following standard for my > inline events calls: > > ..some html... <a href="javascript://" onclick="somePublicFunction(); > return false;">link text goes here</a> > > where as any event function would simply contain a "return false;" at > the tail end of the function right before you end the function. > > Isn't IE lovely? > > Good Luck > > On Aug 28, 12:04 pm, "Chad B." <[EMAIL PROTECTED]> wrote: > > > I've got code that works great in FF but only partially inIE7. 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 inIE7</h2> > > <p><b>Works in FF andIE7:</b> Click the first table cell in each row > > to make the entire row green (should work in FF andIE7).</p> > > <p><b>Works in FF and fails inIE7:</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'); > > } > > }); > > > });
