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。要解决此问题，请使用forEach，以便在单独的范围内运行循环的每次迭代，例如

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

您可以阅读Delegated Events HERE

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

jQuery单击事件，参数不起作用

3 个答案: