jQuery

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 调用后的点击事件没有触发。我该如何解决这个问题？

Answer 1

你在 DOM 存在之前添加事件发生了什么，你应该做什么等待响应实际呈现所有事件和界面或替换它：

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

为了

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

});

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

jQuery - 单击由 AJAX 动态生成的 link

jQuery - click on a link dynamically generated by AJAX

javascript

ajax