带有参数的jQuery单击事件不起作用答案

【问题标题】：jQuery click event with parameter not working带有参数的jQuery单击事件不起作用
【发布时间】：2014-10-01 03:15:06
【问题描述】：

我需要一些帮助。我正在尝试遍历一些 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);
}

谁能帮我修复这个代码？

最好的问候，马吕斯。

【问题讨论】：

$(li) 没有任何意义，也许你想要$('li')？我的意思是.. 你做错了，jQuery 需要一个类或一个元素，而不是整个标签。 var li = $("<li class='video-single'>"); 应该只是 $('.video-single') :) 并且此时 $(li) 可以替换为 li ;)

标签： javascript jquery loops closures handler

【解决方案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);
});

【讨论】：

没问题，如果你想了解更多关于 js 作用域和语言本身的信息。我建议您观看 Douglas Crockford 的一些视频或阅读他的书 JavaScript：The Good Parts。

【解决方案2】：

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

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

你可以阅读Delegated Events HERE

【讨论】：

【解决方案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);
            }

【讨论】：