通過ajax加載數據的無限滾動

Question

我有一個錯誤，我不知道該如何解決，因為我有一個無限滾動，正在加載一些圖片，當我單擊圖片時，會向我顯示彈出圖片，但有時卻沒有，我不知道為什么

這是我的代碼

$(document).ready(function(){
  $('.masonry-brick').on('click', function(e){
    imgSrc = $(this).find('img').attr('src');
    descTitle = $(this).find('.brick-desc-title span').html();
    shareLink = $(this).find('.fb-share').data('link');
    $('#popup-foodpics').find('img').attr('src', imgSrc);
    $('#popup-foodpics').find('.popup-desc-title span').html(descTitle);
    console.log(descTitle);
    displayPopupImg();

  });

  var load = false;
  $(window).scroll(function(){  
    if ($(window).scrollTop() >= ( $(document).height() - $(window).height() -10)  && load == false)  {
      if(load == false){
        var offset = $(".need_reload:last").data("offset");
        $.ajax({
          type: "GET",
          url: "load_pics.php",
          data: {offset : offset},
          cache: false,
          success: function(data){
            console.log(data);
            $('#masonry-container').append(data).masonry( 'reload' );

            $('.masonry-brick').on('click', function(e){
                imgSrc = $(this).find('img').attr('src');
                descTitle = $(this).find('.brick-desc-title span').html();
                shareLink = $(this).find('.fb-share').data('link');
                $('#popup-foodpics').find('img').attr('src', imgSrc);
                $('#popup-foodpics').find('.popup-desc-title span').html(descTitle);
                console.log('test >> '+descTitle);  // BUG HERE DISPLAY MANY TIMES INSTEAD OF ONE TIME
                displayPopupImg();
            });


            load = false;
          }
        });
      }
    }

  });
});

function displayPopupImg(){
    console.log($("#popup-foodpics").css('display'));
    if($("#popup-foodpics").css('display')=="none"){
         $(".blur img").addClass('blured');
    }
    else{
        $(".blur img").removeClass('blured');
    }
    $(".opacite-popup").toggle();
    $("#popup-foodpics").toggle();
}

我嘗試使用console.log進行調試，但它多次觸發console.log而不是一次

Answer 1

它顯示多次，因為您在ajax成功請求之后再次注冊了click事件。

$.ajax({
          type: "GET",
          url: "load_pics.php",
          data: {offset : offset},
          cache: false,
          success: function(data){
            console.log(data);
            $('#masonry-container').append(data).masonry( 'reload' );

            $('.masonry-brick').on('click', function(e){
                imgSrc = $(this).find('img').attr('src');
                descTitle = $(this).find('.brick-desc-title span').html();
                shareLink = $(this).find('.fb-share').data('link');
                $('#popup-foodpics').find('img').attr('src', imgSrc);
                $('#popup-foodpics').find('.popup-desc-title span').html(descTitle);
                console.log('test >> '+descTitle);  // BUG HERE DISPLAY MANY TIMES INSTEAD OF ONE TIME
                displayPopupImg();
            });


            load = false;
          }
        });

因此，不要在ajax成功的情況下重新注冊$('.masonry-brick').on('click',function(){...}

Answer 2

我發現我的問題需要使用委托函數

$(document).on("click", '.masonry-brick', function(event) {