jQuery JSON flickr feed return false not working

Question

I am trying to pull images from a users Flickr feed into a thumbnail gallery using JSON and then would like a link on them that creates a lightbox of the actual picture.

At the moment the script is working fine to pull the images and create an anchor, BUT when I click the images, although I have added "return false", I still get taken off my page and to the page URL.

FYI, there is a ul section with id of 'images'

<script>

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    id: "37493306@N00",
    format: "json"
  },
  function(data){
    $.each(data.items, function(i,item)
    {

      var link = item.media.m;
      link = link.replace('_m','');
      $('<li><a href="' + link + '" class="flickr" rel="prettyPhoto[gallery1]"><img src="' +     link + '" /></a></li>').appendTo('#images');

      if(i==80) return false;

    });
  });

  $('a.flickr').click(function(evt) {
    evt.preventDefault();
  });
</script>

Tell me, is there something quite glaringly obvious about this which is causing it to not work as I thought it should.

Thanks :)

MATT

Answer 1

I think you need to bind your clickhandler with the .on() function instead, like so:

$( document ).on( "click", "a.flickr", function(evt) {
  evt.preventDefault();
  return false;
});

http://api.jquery.com/on/

The reason for this is that your images don't exist in the DOM at the time you're trying to do your binding so you will need to use delegated events. Alternatively, instead of binding to the document, you could use "#images" to attach your handler to your UL element. Basically you want to set up this handler on an element that will contain the dynamically generated elements you're interested in responding to clicks on.