javascript - 使用 jQuery 操作 json 数据

Question

我希望将 json 数据加载为 html，如 this fiddle 中所示及以下。

    (function () {
        var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
        $.getJSON(flickerAPI, {
            tags: "mount rainier",
            tagmode: "any",
            format: "json"
        })
            .done(function (data) {
            $.each(data.items, function (i, item) {
                $("<img>").attr("src", item.media.m).appendTo("#images");
                if (i === 3) {
                    return false;
                }
            });
        });
    })();
        jQuery("#images img").on("click", function (event) {
            console.log('aaa');
        });

我可以让 json 加载，但是我无法获取事件，例如单击以处理已使用 json 加载的数据，我在这里做错了什么？

Answer 1

您需要委托(delegate)您的点击事件。它们被绑定(bind)到 DOM 中的项目，然后您添加新项目，并且事件未绑定(bind)到它们。

尝试用这个替换你的点击 Binder :

jQuery(document).on("click", "#images img", function (event) {
    console.log('aaa');
});

您需要将 document 替换为最低级别的一致包装器，以避免点击时的冗余遍历。