首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Ajax脚本只加载/显示一次

Ajax脚本只加载/显示一次
EN

Stack Overflow用户
提问于 2014-01-17 09:07:59
回答 4查看 118关注 0票数 1

此脚本此后只显示一次动态内容,但不起作用。

以下是代码:

代码语言:javascript
复制
        $(document).ready(function(){
            $('.getmore').on('click',function(){
                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);
                    }
                });
            }); 
        }); 

以下是完整的php代码:

代码语言:javascript
复制
        <?php

    mysql_connect('localhost','root','') or die('Error... Couldnt connect..');
    mysql_select_db('mydb') or die('Error... Couldnt select the Db..');

        $records = mysql_query(' SELECT * FROM `compare_post_comments` WHERE `post_id`=37 limit 5 ');
         if(mysql_num_rows($records)){
             echo '<div id="ajax_comment">';
            echo '<ul id="comments">';
            while($data = @mysql_fetch_array($records) ){
                echo '<li>'.$data['comments'].'</li>';
                $last_record = $data['sno'];
            }
            echo '<li class="getmore" id="'.$last_record.'">Get More</li>';
            echo '</ul>';
            echo "<span id='cmmnts'></span>";
            echo '</div>';
         }
    ?> 

getmore.php代码

代码语言:javascript
复制
    <?php

if( ( isset($_POST['last_id'])!=null ) && $_POST['last_id']!="" ){
    $last_id = $_POST['last_id'];
    //echo "::".$last_id;
    $qry = " SELECT * FROM `compare_post_comments` WHERE `post_id`=37 and sno > ".$last_id." limit 5 ";
    //echo "::".$qry;
    $comments = mysql_query($qry) or die('Error..');
    if( mysql_num_rows($comments) ){
        while( $data = mysql_fetch_array($comments) ){
            echo "<li>".$data['comments']."</li>";
            $last_id=$data['sno'];
        }
        echo "<li class='getmore' id='".$last_id."'>Get More</li>";
    }else{
        echo "<li class='nomore'>No More</li>";
    }
}else{
    echo "<li class='nomore'>No More</li>";
}

?>

ajax调用只工作一次,此后就不能单击了。我对ajax和javascript知之甚少,非常感谢您的解释。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-01-17 09:09:32

尝试使用on的延迟语法:

代码语言:javascript
复制
$(document).on('click', '.getmore', function...

这将在DOM更改中幸存下来。这个答案假定您加载的数据包含一个带有class="getmore"的对象,因为您在成功的时候将它从DOM中删除。如果不是,您需要按照remove的建议删除NewInTheBusiness,但可能需要用empty()替换它,以删除加载进度。

注意,我最近发现了只接受事件和函数的on版本的问题。在jQuery 1.10.3中,它似乎不应该开火。

票数 1
EN

Stack Overflow用户

发布于 2014-01-17 09:10:11

这是因为在成功之后删除getmore类。

删除这一行代码:

代码语言:javascript
复制
$('.getmore').remove();
票数 1
EN

Stack Overflow用户

发布于 2014-01-17 09:10:45

  • 检查您的firebug控制台是否有任何错误
  • 删除这一行$('.getmore').remove();
  • 将单击事件Delegate到元素的static parentdocument

试试看

代码语言:javascript
复制
$(document).on("click",'.getmore', function( event ) {

});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21181794

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档