Question

I got this

for(m in _data.data)
    {
        var _person= new Person(_data.data[m].Properties); //return a person object
        $('ul.v_list').append("<li>"+_person.person_name+'</li>').css("cursor", "pointer");

        $('ul.v_list').find('li:last').bind('click', function(){onPersonChanged(_person)});
    }

And this another function

 function onPersonChanged(person){
        alert("You have clicked " + person.person_name);
   };

Everytime is passing the last object created in the Person Object to the onPersonChanged function so it alerts the last name in the list if I click in the first li or another li element nested in the ul. eg.:

<ul class='v_list'>
     <li>James</li>
     <li>Paul</li>
     <li>Bonnie</l>
</ul>

When I do a click in Paul I expect an alert showing “You have clicked Paul” instead I always get the last one li in the list: “You have clicked Bonnie”. How can I get the correct alert for the selected li?

Answer 1

Your onPersonChanged function is being called after the loop has been executed therefore only the last _person in the loop will be passed through. Look up “closures” in javascript.

To fix it you should do the following:

for(m in _data.data)
{
    var _person= new Person(_data.data[m].Properties);
    (function(p) { 
        $('ul.v_list').append("<li>"+p.person_name+'</li>').css("cursor", "pointer");

        $('ul.v_list').find('li:last').bind('click', function(){onPersonChanged(p)});

    })(_person);
}

this will evaluate the current value of _person as it is at that point in the loop as opposed to evaluating it after the loop has finished.

The (function(p) { ... })(_person); is an anonymous self-executing function. this creates a new sub-scope in your for loop which will preserve the value of _person correctly.