You're using the variable "j" to hold a reference to each element of the
jobs array as you go through the loop. After the loop finishes, "j" is a
reference to the last element of that array.
Later, when the click function gets called, "j" still refers to that last
element - regardless of which element triggers the event.
You need to keep track of each of those elements separately. The easiest way
to do that is with a closure.
Also, you don't want to use "for in" to iterate over an array. Use a C-style
loop instead. So, you could code this:
for( var i = 0, n = json.jobs.length; i < n; i++ ) {
(function( job ) {
// ...
$("#editJob" + job.jobID).click(function() {
alert(job.jobID);
});
})( json.jobs[i] );
}
The inner function captures a separate "job" variable for each instance of
the loop, so when the click function gets called later, it will have the
correct reference. (I took the liberty of changing the name from j to job
just to make the example more clear - I always think of "j" as an index
variable like "i".)
Even better, jQuery has an iterator function you can use to simplify the
code:
$.each( json.jobs, function( i, job ) {
// ...
$("#editJob" + job.jobID).click(function() {
alert(job.jobID);
});
});
Again, each click function will use its own copy of the job variable - not
because of any jQuery magic, but simply because of the use of the inner
function. $.each just runs the loop for you.
-Mike
> The < a > tag that was in the "var div" line got rendered as
> an actual link.
> Here it is again with spaces to prevent it from being
> rendered as a link:
>
> var div = "<div id='job" + j.jobID + "'><h1 id='jobTitle" +
> j.jobID + "'
> style='display:inline;font-weight:normal'>" + j.companyName +
> "</h1> | < a href='#' id='editJob" + j.jobID + "'>edit< / a>";
>
> > I'm parsing this JSON:
> >
> > {"result":"success","successText":"Your changes have been saved
> >
> successfully.","errorText":"","memberID":"49","mode":"edit","jobs":[{"
> >
> jobID":"1","companyName":"SAIC"},{"jobID":"2","companyName":"Aspentech
> > "},{"jobID":"3","companyName":"Cardinal
> > Health"}]}
> >
> > ...with this Javascript:
> >
> > $("#panelManageJobView").empty();
> >
> > for (var i in json.jobs)
> > {
> > var j = json.jobs[i];
> > var div = "<div id='job" + j.jobID + "'><h1
> id='jobTitle" + j.jobID + "'
> > style='display:inline;font-weight:normal'>" + j.companyName +
> > "</h1> | # edit ";
> > div += "<div style='padding-top:10px;display:none'
> id='jobEdit" +
> > j.jobID
> > + "'></div></div>";
> > if (i > 0)
> > {
> > div = "<div class='padLine'> </div>" + div;
> > }
> > $("#panelManageJobView").append(div);
> >
> > //now register click event on edit link
> > $("#editJob" + j.jobID).click(function() {
> > alert(j.jobID);
> > });
> > }
> >
> > Everything works fine, and is added to the page correctly. I even
> > viewed the generated HTML and confirmed that the ID's are
> > correct on each div that gets appended. However, when I click on
> > the "edit" link next to each item, the alert always shows the last
> > "jobID" that was received in the JSON - "3" in this example. I'm
> > expecting to get "1" if I click the first edit link, "2" if I click the
> > second, and so on.
> >
> > Any ideas what I'm doing wrong?
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
