带有参数的jQuery click事件不起作用

Question

我需要协助。 我试图遍历一些Json项，使用项中的一些信息创建一些li，还附加了li的单击处理程序，但是将值作为参数传输。

问题是该参数的最后一个值被设置为或列表中的li。 从我的搜索中，我了解到它与javascript闭包有关，但似乎无法理解如何解决它。

我正在使用jQuery，这是代码：

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);
}

有人可以帮我解决此代码吗？

最好的问候，马吕斯。

Answer 1

问题在于JS是函数作用域的，因此闭包中的id是for循环中的最后一个id。 为了解决这个问题，您可以在单独的范围内运行循环的每次迭代，例如

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);
});

Answer 2

由于元素是动态创建的，因此需要委托事件 ，可以使用在li上添加的类video-single ：

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

您可以在此处了解有关委托活动的信息

Answer 3

为了将事件绑定到动态添加的元素，您需要按以下方式委派它：

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);
            }