.val(...) in change handler invokes change handler in IE

Reported by:	davidwebster48@hotmail.com	Owned by:	dmethvin
Priority:	low	Milestone:	None
Component:	event	Version:	1.6.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

When you have a function bound the the change event of an input field, and the function changes the input field's value using .val(...), the change event handler gets invoked twice (once from the real change, and once from calling .val(...)). This happens in IE8 and IE9, but not in FireFox 6 or Chrome.

The expected output from the code below is that "change" will be logged once, however it actually gets logged twice in IE.

<!doctype html>
<html>
	<head>
		<title>x</title>
	</head>
	<body>
		<input type="text" id="inputField" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script>
			$("#inputField").change(function() {
				console.log("change"); 
				$(this).val("newval");
			});
		</script>
	</body>
</html>

Attachments (0)

Change History (4)

Changed August 25, 2011 01:32PM UTC by timmywil comment:1

component:	unfiled → event
priority:	undecided → low

http://jsfiddle.net/timmywil/apH9c/

Confirmed, but I'm not sure we can fix this. Changing the value with javascript triggers a change in IE, but not in other browsers.

Changed August 27, 2011 08:14PM UTC by dmethvin comment:2

owner:	→ dmethvin
status:	new → assigned

Since it's using the special event interface there may be a solution; I'll mark it open and look at it soon.

Changed September 21, 2011 03:13AM UTC by dmethvin comment:3

resolution:	→ fixed
status:	assigned → closed

This is fixed by the new IE change detection logic in 1.7.

https://github.com/jquery/jquery/commit/3bd7bed340f9077d39734ffce366ef2caeb9ce35

Changed September 21, 2011 03:18AM UTC by dmethvin comment:4

#8040 is a duplicate of this ticket.

Side navigation