Question

以下脚本适用于每次点击都会被触发的数据，但我想要在用户向下滚动页面时触发的数据代码：

            $(document).ready(function(){
            $(document).on("click",'.getmore', function( event ){
                var last_id = $(this).attr('id');   
                $.ajax({
                    type: 'POST',
                    url : 'http://localhost/tech1/services/getmore.php',    
                    data: 'last_id='+last_id,
                    beforeSend: function(){
                        $('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');  
                    },
                    success: function(data){
                        $('.getmore').remove();
                        $('#comments').append(data);
                    }
                });
            }); 
        });

编辑 - 可用代码：

function infiniteAjaxCall(getmore){  //<---pass id in the param
   $.ajax({
    type: 'POST',
    url: 'http://localhost/tech1/services/getmore.php',
    data: 'last_id=' + getmore})  //<-----and use it here


     $(document).ready(function () 
     {
 $(document).ready(function () {
     $(document).on("click", '.getmore', function (event) {
       var last_id = $(this).attr('id');
       infiniteAjaxCall(last_id);
        });

      $(window).on('scroll', function()
         {
         if($(document).scrollTop() == $(document).height() - $(window).height())
  {
          $('.getmore').click();
  }
       });
           })} )}

这是可用的代码，但无法解决问题。

Answer 1

您可以尝试添加此内容：

 $(document).ready(function () {
   $(document).on("click", '.getmore', function (event) {
     var last_id = $(this).attr('id');
     $.ajax({
        type: 'POST',
        url: 'http://localhost/tech1/services/getmore.php',
        data: 'last_id=' + last_id,
        beforeSend: function () {
            $('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');
        },
        success: function (data) {
            $('.getmore').remove();
            $('#comments').append(data);
        }
    });
  });

  $(window).on('scroll', function(){
      if($(document).scrollTop() == $(document).height() - $(window).height()){
          $('.getmore').click();   //^^^^^^^^update the if condition^^^^^^^^---
      }
  });

});

我可以建议的另一种方式是：

制作全球功能：

function infiniteAjaxCall(id){  //<---pass id in the param
       $.ajax({
        type: 'POST',
        url: 'http://localhost/tech1/services/getmore.php',
        data: 'last_id=' + id,  //<-----and use it here
}

然后按下按钮：

 $(document).ready(function () {
   $(document).on("click", '.getmore', function (event) {
     var last_id = $(this).attr('id');
     infiniteAjaxCall(last_id);
  });

  $(window).on('scroll', function(){
      if($(document).scrollTop() == $(document).height() - $(window).height()){
          var last_id = $('.getmore').attr('id');
          infiniteAjaxCall(last_id);
          // or this
          // $('.getmore').click(); // you can try commenting out first two lines above.
      }
  });

});

只需滚动页面即可无限滚动

1 个答案: