Bug Tracker

#3906 closed bug (wontfix)

Opened January 18, 2009 07:47AM UTC

Closed January 20, 2009 11:14PM UTC

Last modified March 15, 2012 02:50PM UTC

Live() generates duplicate click events if it's contained within an each() callback and the selector is scoped to a context

Reported by: jsdalton Owned by: brandon
Priority: major Milestone: 1.3.1
Component: event Version: 1.3
Keywords: live() Cc:
Blocked by: Blocking:
Description

My apologies if this is a duplicate or invalid ticket, of if I'm just doing something wrong, but I believe this is a bug related to the new live() method.

I have discovered that, within the scope of an each() callback, if a click event is bound to a selector that contains a contex pointing to the this DOM element from the each loop, the event starts firing duplicate times, as though more than one object were clicked.

This is a bit hard to explain, it's best seen by example.

The following code works as one would expect it would, using the regular click() event handler:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Live</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript">
		(function($) {	
			$(document).ready(function() {
				$(".foo").each(function() {
					$("a", this).click(function() {
						alert( $(this).text() );
						return false;
					})
				});
			});
		})(jQuery);
	</script>
	
</head>

<body>
	<p class="foo"><a href="#">here's a click</a></p>
	<p class="foo"><a href="#">there's a click</a></p>
</body>
</html>

Now, observe, the only change I am making is changing .click(function() {...}) to .live("click", function() {...}):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Live</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript">
		(function($) {
			$(document).ready(function() {
				$(".foo").each(function() {
					$("a", this).live("click", function() {
						alert( $(this).text() );
						return false;
					})
				});
			});
		})(jQuery);
	</script>
</head>
<body>
	<p class="foo"><a href="#">here's a click</a></p>
	<p class="foo"><a href="#">there's a click</a></p>
</body>
</html>

Observe that the alert window appears twice, as though the element were clicked twice.

I reduced this bug down to it's simplest form I could get it to. If you have more hyperlinks on the page the problem gets even worse.

Note that if you remove the each() scope, it functions as normal.

I have tested this in both Firefox 3.0.5 for Mac and Safari 3.1.2 for Mac and I get the same result in each.

I hope this is helpful. Thanks.

(Loving 1.3 btw, thanks for all the hard work you guys put into it.)

Attachments (0)
Change History (2)

Changed January 20, 2009 11:14PM UTC by john comment:1

resolution: → wontfix
status: new → closed

That's correct. As of right now .live() doesn't support contexts passed in - only normal selectors. Without knowing more about your specific case you can get away with doing:

$(".foo a").live("click", function() {
	alert( $(this).text() );
	return false;
});

I'll make a note of this in the documentation.

Changed November 13, 2010 08:47PM UTC by anonymous comment:2

I had the same issue.

using the following as john suggested fixed the problem

Regards!

$(".foo a").live("click", function() {
	alert( $(this).text() );
	return false;
});