jQuery click event with parameter not working

Question

I need some help. I am trying to iterate through some Json items, create some li's with some information from the items, but also attach click handlers for the li's, but with a value transmited as parameter.

The problem is that the last value of that parameter is set for or the li's in the list. From what i searched i understood that it has something to do with javascript closure, but can't seem to understand how to fix it.

I am using jQuery and here is the code:

for (var i = 0; i < items.length; i++)
{
    // information that will be displayed for each video
    var entry = items[i];

    var title = entry.title;
    var image = entry.thumbnail.hqDefault;
    var id = entry.id;

    var li = $("<li class='video-single'>");
    li.append("<img src='" + image + "' alt='" + title + "'>");
    li.append("<h4>" + title + "</h4>");

    $(li).click(function() {
        displayPopUp(id);
    });

    ul.append(li);
}

Could anyone please help me fix this code?

Best regards, Marius.

$(li) means nothing, perhaps you wanted $('li')? I mean.. you're doing it wrong, jQuery expects a class or an element, not an entire tag. var li = $("<li class='video-single'>"); should simply be $('.video-single') :) and, at this point $(li) can be replaced with li ;) — briosheje
– briosheje, Commented Aug 7, 2014 at 18:53

ShaneQful · Accepted Answer · 2014-09-20 11:22:56Z

1

The issue is that JS is function scoped so the id within your closure is the last id from your for loop. To fix this use forEach so you run each iteration of your loop in a separate scope e.g.

items.forEach(function (el, i) {
    // information that will be displayed for each video
    var entry = items[i];

    var title = entry.title;
    var image = entry.thumbnail.hqDefault;
    var id = entry.id;

    var li = $("<li class='video-single'>");
    li.append("<img src='" + image + "' alt='" + title + "'>");
    li.append("<h4>" + title + "</h4>");

    $(li).click(function() {
        displayPopUp(id);
    });

    ul.append(li);
});

edited Sep 20, 2014 at 11:22

answered Aug 7, 2014 at 18:54

ShaneQful

2,2862 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ShaneQful Over a year ago

No problem, if you want to learn more about js scope and the language itself. I'd recommend looking at a few videos by Douglas Crockford or reading his book JavaScript:The Good Parts.

Ehsan Sajjad · Accepted Answer · 2014-08-07 18:54:24Z

1

you need delegated event as elements are created dynamically, you can use class that is being added on li which is video-single:

$(document).on('click','.video-single',function() {
                        displayPopUp(id);
                    });

you can read about Delegated Events HERE

answered Aug 7, 2014 at 18:54

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Comments

Amin Jafari · Accepted Answer · 2014-08-07 18:53:57Z

in order to bind an event to a dynamically added element you need to delegate it as below:

for (var i = 0; i < items.length; i++)
            {
                // information that will be displayed for each video
                var entry = items[i];

                var title = entry.title;
                var image = entry.thumbnail.hqDefault;
                var id = entry.id;

                var li = $("<li class='video-single'>");
                li.append("<img src='" + image + "' alt='" + title + "'>");
                li.append("<h4>" + title + "</h4>");

                $(document).bind('click',li,function() {
                    displayPopUp(id);
                });

                ul.append(li);
            }

Collectives™ on Stack Overflow

jQuery click event with parameter not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related