[jQuery] IE7 change event not bubbling
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>
<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).
<b>Works in FF and fails in IE7:</b> Changes to inputs (checkbox
and text) should change the containing cell to orange.
<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" /