Question

I have a series of list items which contain data attributes to store information such as this:

<li data-name="John Doe" data-age="42" data-gender="male">...</li>

I am using that information to populate a popover injected using jQuery and I need to store the information to variables corresponding to each list item. I am using .click() to append the popover to the list item and then fade it in. But when I attempted to include the variables in the function to limit their scope, my code stopped working correctly. Here is a rough example of what I had:

var person = $('#list li');

person.click( function() {
    var name = $(this).attr('data-name'),
        age = $(this).attr('data-age'),
        gender = $(this).attr('data-gender');

    $(this).children('div.foo').fadeIn();
})
    .append(
        '<div class="foo">
             <dl>
                 <dt>Name:</dt>
                 <dd>' + name + '</dd>
                 <dt>Age:</dt>
                 <dd>' + age + '</dd>
                 <dt>Gender:</dt>
                 <dd>' + gender + '</dd>
             </dl>
         </div>'
    );

Any ideas on why this isn’t working as I would like?

Answer 1

The variables name, age and gender are only visible to the scope of the click function, so you can’t use them in the append block below that.

var person = $('#list li');

person.click( function() {
    var name = $(this).attr('data-name'),
        age = $(this).attr('data-age'),
        gender = $(this).attr('data-gender');
    $(this).append( '<div class="foo">
             <dl>
                 <dt>Name:</dt>
                 <dd>' + name + '</dd>
                 <dt>Age:</dt>
                 <dd>' + age + '</dd>
                 <dt>Gender:</dt>
                 <dd>' + gender + '</dd>
             </dl>
         </div>');
     $(this).children('div.foo').fadeIn();
});