JQuery：为什么这加载更多的功能不工作？

Question

试图实现一个简单的“加载更多”使用jQuery功能。这个想法就像使用页面一样使用它。单击并显示从数据库加载的一定数量的帖子。

我有以下的javascript：

$(function(){ 
    var count = 0; 
    var num = 20; 
    $("#contents").load("posts.php"); 
    $("#more").click(
function(){ 
var count = 0; 
var num = 20; 
$("#contents").load("posts.php"); 
$("#more").click(
     function(){ 
       $(".loading").show("fast"); 
         count += num; 
         $.post("posts.php", {'page': count}, function(data){ 

             $("#contents").append(data); 
             $(".loading").hide("slow"); 
           }); 

       } 

); 

及以下文件posts.php

<? 
echo "hello"; 
?> 

我必须跟

<div id="contents"></div> 
<div class="loading"><span style="text-decoration: blink;">LOADING...!</span></div> 
<button id="more">More..</button> 

另一个文件page.php文件，当我点击尽管我只是试图在这里打印出一个简单的hello世界，但“更多按钮”却没有任何反应。我已经在文件的头部加载了javascript，如

<script type ="text/javascript" src ="javascript/load.js"></script> 

我实现的其他javascript功能工作正常。有什么要添加到page.php中的“加载”或“内容”元素？

Answer 1

您的JavaScript缺乏基本的语法结构，必须发出一个语法错误，除非你搞砸了，而在这里发帖。试试这个：

$(function(){ 
    var count = 0; 
    $("#more").click(loadPosts); 
    loadPosts(); 

    function loadPosts() { 
     var num = 20; 
     $(".loading").show("fast"); 
     count += num; 
     $.post("posts.php", {'page': count}, function(data){ 
      $("#contents").append(data); 
      $(".loading").hide("slow"); 
     }); 
    } 
}); 

UPDATE

编辑上面的代码，并删除$("#contents").load("posts.php");。这不是必要的，而且是多余的。