Resolving Scope

I am developing a site that keeps track of my clients jobs. Each job shows in a list and has an arrow to the left of the job title that can be opened to reveal the job details.

I’m creating the jobs in an Array of Objects. But I’m having a problem getting the arrow to link up to the proper Object. I’m going to simplify it in the code that I’m posting.

I’ve had a similar problem that was resolved by putting the function inline. but for some reason it won’t work this time.

Any help would be greatly appreciated!

[CODE]jobs = new Array();

$(function(){
for(i=0; i<10; i++){
jobs[i] = Component(i);
}
});

//———————–Job Object
function Component(id){
this.id = id;

this.header = header;
this.showBody = showBody;

header();
}

function header(){
that = this;

(function(x){
arrow = $(“<a href=’#”+x.id+”‘>”).html(“>”+x.id).click(
function(){ alert(that.id); }
);
})(that)

$(“#links”).append(arrow);
}

function showBody(){
alert(this.id);
}[/CODE]

In this sample, when I click on any of the anchor tags, I’m getting an alert that show “9”. But tag shows correctly with each number (“>1 >2 >3”..etc)

Ultimately, I’d want the function inside the click to call the “showBody” function, but I’m not sure how to do that so that I can use “this” within the showBody function and still refer to the correct object.

Thanks again,
Brian

Also in #JavaScript _↴