使用jQuery处理JSON数据 [英] Manipulate json data with jQuery

问题描述

我希望将json数据以html格式加载，如此小提琴及以下所示.

I am looking to load json data as html as show in this fiddle and below.

    (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的数据之类的事件，这是怎么回事?

I can get the json to load however I can't then get events such as on click to work with data that has been loaded with json, what am I doing wrong here?

推荐答案

您需要委派点击事件.它们被绑定到DOM中的项目，然后您添加了新项目，并且事件没有被绑定到它们.

You need to delegate your click events. They're being bound to items in the DOM, and then you're adding new items, and the events are not bound to them.

尝试以此替换您的Click活页夹:

Try replacing your click binder with this:

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

您将要用最低级别的一致包装器替换document，以避免单击时出现多余的遍历.

You'll want to replace document with the lowest-level consistent wrapper to avoid redundant traversal on click.

这篇关于使用jQuery处理JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！