Don't fire change on an already-selected radio.

Thanks to Brandon Wallace (@bman654) for his code review. Also tweaks delegatetest.html output.
jquery · Sep 21, 2011 · b85f222 · b85f222
1 parent 3bd7bed
commit b85f222
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/event.js b/src/event.js
@@ -764,12 +764,20 @@ if ( !jQuery.support.changeBubbles ) {
 		setup: function() {
 
 			if ( rformElems.test( this.nodeName ) ) {
-				// IE doesn't fire change on a checkbox/radio until blur; make it happen
+				// IE doesn't fire change on a check/radio until blur; trigger it on click
-				// immediately by triggering our own change event now.
+				// after a propertychange. Eat the blur-change in special.change.handle.
-				// Avoid double-firing change by eating it in special.change.handle.
+				// This still fires onchange a second time for check/radio after blur.
 				if ( this.type === "checkbox" || this.type === "radio" ) {
+					jQuery.event.add( this, "propertychange._change", function( event ) {
+						if ( event.originalEvent.propertyName === "checked" ) {
+							this._just_changed = true;
+						}
+					});
 					jQuery.event.add( this, "click._change", function( event ) {
-						simulate( "change", this, event, true );
+						if ( this._just_changed ) {
+							this._just_changed = false;
+							simulate( "change", this, event, true );
+						}
 					});
 				}
 				return false;

diff --git a/test/delegatetest.html b/test/delegatetest.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Change Tests</title>
+<title>Event Delegation Tests</title>
 <script>
 var version = location.search && location.search.substr(1);
 if ( version ) {
@@ -66,12 +66,6 @@ <h2>Delegate Tests (<span id="version">BAD FILE IN URL</span>, <span id="filever
 			<input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
 			<label for="check3">check3</label>
 		</td>
-		<td id="button">
-			<button name="mybutton1" id="button1">Button</button><br />
-			<button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
-			<button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
-			<button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
-		</td>
 		<td id="radio">
 			<input type="radio" name="myradio" id="radio1"/>
 			<label for="radio1">Radio1</label><br/>
@@ -90,7 +84,12 @@ <h2>Delegate Tests (<span id="version">BAD FILE IN URL</span>, <span id="filever
 		<td id="textarea">
 			<textarea rows='2'></textarea>
 		</td>
-
+		<td id="button">
+			<button name="mybutton1" id="button1">Button</button><br />
+			<button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
+			<button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
+			<button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
+		</td>
 	</tr>
 </thead>
 <tbody>
@@ -136,7 +135,7 @@ <h2>Submit Tests</h2>
 $("#fileversion").text($.fn.jquery);
 
 // Events we want to track in row-order
-var events = "bind-change live-change on-change bind-propertychange live-beforeactivate live-focusin bind-focus live-keydown live-beforedeactivate live-focusout bind-blur live-click".split(" "),
+var events = "bind-change live-change on-change bind-propertychange live-beforeactivate live-focusin bind-focus live-beforedeactivate live-focusout bind-blur live-click live-keydown".split(" "),
 	counter = 0;
 	blinker = function(event){
 		if ( !counter ) {