JQuery:为什么加载更多功能不起作用?

时间:2011-10-05 02:51:52

标签: php javascript jquery

尝试使用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";
?>

我还有另一个文件page.php和

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

当我点击“更多按钮”虽然没有任何反应,即使我只是想在这里打印出一个简单的你好世界。我已经在文件的头部加载了javascript,如

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

我实现的其他JavaScript功能正常。是否有东西要添加到page.php中的“loading”或“contents”元素?

1 个答案:

答案 0 :(得分:2)

你的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");
        });
    }
});

<强>更新

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