title: jQuery - click on a link dynamically generated by AJAX
body: <p>I read many different posts about this matter but I can't solve my problem.
  I am trying to create a simple lightbox on dynamically generated content.</p>
  
  <pre><code>   $(document).ready(function() {
    $("body").on("click", "button", function() {
      $("button").removeClass("selected");
      $(this).addClass("selected");
  
      var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
      var animal = $(this).text();
      var flickrOptions = {
        tags : animal,
        format: "json"
      };
      var displayPhotos = function(data) {
        var photoHTML = "&lt;ul&gt;";
        $.each(data.items, function(i, photo) {
          photoHTML += '&lt;li class="grid-25 tablet-grid-50"&gt;';
          photoHTML += '&lt;a href="' + photo.link + '" class="image"&gt;';
          photoHTML += '&lt;img src="' + photo.media.m + '" &gt;&lt;/a&gt;&lt;/li&gt;';
        });
        photoHTML += '&lt;/ul&gt;';
        $('#photos').html(photoHTML);
      }
      $.getJSON(flickrAPI, flickrOptions, displayPhotos);
  
        var $overlay = $('&lt;div id="overlay"&gt;&lt;/div&gt;');
        var $image = $("&lt;img&gt;");
        var $caption = $("&lt;p&gt;&lt;/p&gt;");
  
        //An image to overlay
        $overlay.append($image);
  
        //A caption to overlay
        $overlay.append($caption);
  
        //Add overlay
        $("body").append($overlay);
  
        //Capture the click event on a link to an image
        $("#photos a").click(function(event){
          event.preventDefault();
          var imageLocation = $(this).attr("href");
          //Update overlay with the image linked in the link
          $image.attr("src", imageLocation);
  
          //Show the overlay.
          $overlay.show();
  
          //Get child's alt attribute and set caption
          var captionText = $(this).children("img").attr("alt");
          $caption.text(captionText);
        });
  
        //When overlay is clicked
        $overlay.click(function(){
          //Hide the overlay
          $overlay.hide();
        });
    });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/wisd81/23gzbqdh/3/" rel="nofollow">Here is my complete code on jsfiddle</a></p>
  
  <p>The click event after the AJAX call doesn't fire up. 
  How can I solve this?</p>