帶有參數的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);
            }