Side navigation
#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 comment:1
resolution: | → wontfix |
---|---|
status: | new → closed |
Changed November 13, 2010 08:47PM UTC by 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; });
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:
I'll make a note of this in the documentation.