基本的JavaScript功能

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和滚动事件。

所以创建一个函数来加载内容，像这样：

// 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(); 
    } 
}); 

然后设置载入更多链接的onclick事件：

// 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>'); 
      } 
     } 
    }); 
} 

滚动事件窗口然后绑定

// 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(); 
}); 

UPDATE

我忘了确保页面加载后分配的事件。全部包围你的JavaScript与此：

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

Answer 2

尝试类似的东西来代替滚动部件：

$('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 3

如果你说你想要的代码在滚动执行这两个和点击你的链接时，你可以把常用的代码，你从所有的调用函数地方你需要它：

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

注意到返回从点击处理程序假停止链接上点击的默认行为（即，防止其从当前页面导航离开或移动回到页面顶部）。

我不确定.show()是否出现在链接中，所以我将它留在滚动处理程序中。如果适用于这两种情况，请将其移至doStuff()函数中。

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>