Manipulate json data with jQuery

Question

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');
        });

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?

You want to look at delegated events: api.jquery.com/on/#direct-and-delegated-events — Barbara Laird
– Barbara Laird, Commented Sep 16, 2013 at 23:56

SeanCannon · Accepted Answer · 2013-09-16 23:56:13Z

2

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.

Try replacing your click binder with this:

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

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

answered Sep 16, 2013 at 23:56

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neil S · Accepted Answer · 2013-09-17 00:00:41Z

0

try this instead:

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

the element with the id images exists when your event binding is attached, but the image elements do not. So using the on method, you can pass the img elements as a second parameter so that all img elements that are added after the page load are properly bound to this event handler.

answered Sep 17, 2013 at 0:00

Neil S

2,30421 silver badges28 bronze badges

Collectives™ on Stack Overflow

Manipulate json data with jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related