Question

我有一个错误，我不知道如何解决这个问题我有一个infinte卷轴正在加载一些图片，当我点击一个图片时，它会显示弹出窗口中的图片，但有时它不会，我不知道为什么

这是我的代码

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

通过ajax加载数据的无限滚动

2 个答案: