бесконечный прокрутка с загрузкой данных через 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 success.

$.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; 
      } 
     }); 

Так, то не перерегистрировать $('.masonry-brick').on('click',function(){...} на АЯКС успеха

Answer 2

я нашел мою проблему мне нужно использовать функцию делегата

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