Question

我有这个功能

<script type="text/javascript">
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      $('div#loadmoreajaxloader').show();
      $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html) {
          if (html) {
            $("#postswrapper").append(html);
            $('div#loadmoreajaxloader').hide();
          } else {
            $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
          }
        }
      });
    }
  });
</script>

但我需要发生相同的事情（在IOS设备上），但是当浏览器到达loadmoreajaxeloader div时，我只需要在onclick事件上发生这种情况。一条链接。谢谢你。

尝试添加代码，但没有格式化，所以这里是http://pastebin.com/p2VUqZff

Answer 1

您需要分离Ajax和滚动事件。

所以创建一个加载内容的函数，如下所示：

// Create the load content function
function loadContent(){
    $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html){
            if(html){
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else{
                $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
            }
        }
    });
}

然后将滚动事件绑定到窗口：

// Set the onscroll event
$(window).scroll(function(){
    if($(window).scrollTop()==$(document).height()-$(window).height()){
        $('div#loadmoreajaxloader').show();
        // IF YOU WANT TO LOAD MORE CONTENT WHEN SCROLLING THEN UNCOMMENT THE NEXT LINE
        // loadContent();
    }
});

然后设置Load More链接的onclick事件：

// Bind the click event to the Load More link
$('#loadMore').click(function(e){
    // This will prevent any default action
    e.preventDefault();
    // Load the content
    loadContent();
});

<强>更新

我忘了确保在页面加载后分配事件。用这个包围你所有的javascript：

$(document).ready(function(){
    // PUT ALL THE JAVASCRIPT HERE
});

Answer 2

如果您说要在滚动时执行代码，并且在单击链接时，您可以将公共代码放在您从所需的所有位置调用的函数中：

function doStuff() {
  $.ajax({
    url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
    success: function(html) {
      if (html) {
        $("#postswrapper").append(html);
        $('div#loadmoreajaxloader').hide();
      } else {
        $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
      }
    }
  });
}

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
     $('div#loadmoreajaxloader').show();
     doStuff();
  }
});

$("#idOfYourLinkGoesHere").click(function() {
   doStuff();
   return false;
});

注意到从点击处理程序返回false会停止链接上点击的默认行为（即，阻止它从当前页面导航或移回页面顶部）。

我不确定.show()是否是从链接发生的，所以我把它留在了滚动处理程序中。如果适用于任何一种情况，请将其移至doStuff()函数。

Answer 3

尝试用类似的东西替换滚动部分：

$('a#moreLoader').click(function() {
    $('div#loadmoreajaxloader').show();
        $.ajax({
            url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
            success: function(html) {
                if (html) {
                    $("#postswrapper").append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
                }
             }
        });

        return false;
});

其中a#moreLoader是指向'moreLoader'作为ID：

的链接

<a id="moreLoader" href="#">load more</a>

Answer 4

我认为您所问的是“如果点击链接，我怎么能重复使用” - 如果是这样，答案就是：

<script type="text/javascript">

  // Declare the AJAX action as a separate function
  var loadMoreContent = function() {
    $.ajax({
      url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
      success: function(html) {
        if (html) {
          $("#postswrapper").append(html);
          $('div#loadmoreajaxloader').hide();
        } else {
          $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
        }
      }
    });
  };

  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      $('div#loadmoreajaxloader').show();
      loadMoreContent(); // Just call the separate function here
    }
  });

  // ...and attach the function as a click handler to the link:
  $('#idOfMyLink').click(function() {
    loadMoreContent(); // Just call the separate function here
    return false; // Return false to prevent navigation away from the page
  });

</script>

基本的javascript函数

4 个答案: