Question

我希望将json数据加载为this fiddle及以下显示的html。

    (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

您需要委派点击事件。它们被绑定到DOM中的项目，然后您将添加新项目，并且事件不会绑定到它们。

尝试用以下方法替换您的点击活页夹：

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

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

Answer 2

试试这个：

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

附加事件绑定时存在标识为images的元素，但图像元素不存在。因此，使用on方法，您可以将img元素作为第二个参数传递，以便在页面加载后添加的所有img元素都正确绑定到此事件处理程序。

使用jQuery处理json数据

2 个答案: