jQuery - click on a link dynamically generated by AJAX

Question

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.

   $(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 = "<ul>";
      $.each(data.items, function(i, photo) {
        photoHTML += '<li class="grid-25 tablet-grid-50">';
        photoHTML += '<a href="' + photo.link + '" class="image">';
        photoHTML += '<img src="' + photo.media.m + '" ></a></li>';
      });
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
    }
    $.getJSON(flickrAPI, flickrOptions, displayPhotos);

      var $overlay = $('<div id="overlay"></div>');
      var $image = $("<img>");
      var $caption = $("<p></p>");

      //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();
      });
  });
});

Here is my complete code on jsfiddle

The click event after the AJAX call doesn't fire up. How can I solve this?

Please have a look at the complete code on jsfiddle: jsfiddle.net/wisd81/23gzbqdh/3 — wisd81
– wisd81, Commented Jan 6, 2015 at 2:57

ncubica · Accepted Answer · 2015-01-06 03:20:42Z

4

what it's happening its that you are adding the event before the DOM exists, what you should do its wait for the response to actually render all the event and the interface or replace this:

  $("#photos a").click(function(event){
  });

for

  $(document).on("click","#photos a",function(){

});

that way the event its gonna exist always... Its my guess... I'm not sure if $("#photos a") actually get the element you want to attach the event, but you got the idea of how you can add event to DOM elements that still dont exist on the DOM.

enter image description here

edited Jan 6, 2015 at 3:20

answered Jan 6, 2015 at 2:59

ncubica

8,53510 gold badges58 silver badges74 bronze badges

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

4 Comments

wisd81 Over a year ago

It seems not to work... as soon as I click on a photo it redirects to the photo page instead of showing the lightbox

ncubica Over a year ago

share with me your jsfiddle pls here

ncubica Over a year ago

jsfiddle.net/23gzbqdh/4 its working there should be other problem in your code but this answer your question you can see the picture above in the answer I added debugger statement you can see it with google chrome inspector console

wisd81 Over a year ago

It works. Thank you very much. I'm just trying to figure out what is the problem with the rest of my code now.

Collectives™ on Stack Overflow

jQuery - click on a link dynamically generated by AJAX

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related