[jQuery] I need help with the jQuery .click event
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";
color:black;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor=white lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Chris,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I would use the “this”
variable in place of the i ie foo(this, ConstantArgument) see if that helps.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Ben<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
color=black face="Times New Roman"><span style='font-size:12.0pt;color:windowtext'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 color=black face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma;color:windowtext;font-weight:bold'>From:</span></font></b><font
size=2 color=black face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma;
color:windowtext'> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <b><span style='font-weight:bold'>On Behalf
Of </span></b>Christopher Jordan
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, October 25, 2006
4:15 PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> [jQuery] I need help with
the jQuery .click event</span></font><font color=black><span style='color:windowtext'><o:p></o:p></span></font>
</div>
<p class=MsoNormal><font size=3 color=black face="Times New Roman"><span
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'>Hi folks,
I've got a function that builds several elements on a page with a certain
class. I've successfully used jQuery to add mouseover and mouseout events to
all the elements with that certain class, and it works beautifully. I couldn't
be happier. :0)
So, now I need to add a click event to each of those elements. The trouble is,
that not each of those click events will be exactly the same. Each will call
the same function but with slightly different arguments (one constant and one
variable). After playing with a couple of ideas on how to use jQuery to
accomplish this, I ended up with the following:
... inside a JS for loop with a counter 'i' ...
$("##MyContainerID").append("<span
id=\"id_" + i + "\" class=\"MyClass\"
value=\"" + i + "\">" + i + "</span>");
$("##id_" + i).click(
function(){
foo(i,ConstantArgument);
}
);
... end loop ...
The loop creates each of these elements on the page and I was hoping it would
then assign a click event to each element (made unique with the id), and this
seemed to work. However when I click on each of the elements in turn I can see
that they are each calling the function (foo) with the same arguments (30,40).
While 40 is the constant argument and is correct, the other argument was
supposed to range from 1 - 29 (the number of elements in this particular list).
I'm a bit confused I thought this should work. Can anyone shed any light on
what I may be doing wrong? Is there a different approach i need to take? Is
there a better jQueryie-type way to accomplish this task that will make life
easier?
Thanks,
Chris</span></font><o:p></o:p>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/