jQuery - 单击由AJAX动态生成的链接

Question

我读了很多关于此事的不同帖子，但我无法解决我的问题。 我正在尝试在动态生成的内容上创建一个简单的灯箱。

   $(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

AJAX调用后的click事件不会启动。 我该如何解决这个问题？

Answer 1

正在发生的事情是你在DOM存在之前添加事件，你应该做什么等待实际呈现所有事件和接口的响应或替换它：

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

的

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

});

这样的事件总会存在......我的猜测......我不确定$("#photos a")是否真的得到了你想要附加事件的元素，但你知道你是怎么做的可以将事件添加到DOM上仍然不存在的DOM元素。