Ajax脚本加载/只显示一次

Question

此脚本显示动态内容，此后一次无效

这是代码：

        $(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代码：

        <?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代码

    <?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的知识，解释得到赞赏。

Answer 1

尝试的递延语法on ，而不是：

$(document).on('click', '.getmore', function...

这将在DOM变化中存活下来。 这个答案假设您加载的数据包含一个class="getmore"的对象，因为您在成功时将其从DOM中删除。 如果不是，您需要按照NewInTheBusiness建议删除remove ，但可能将其替换为empty()而不是删除加载进度。

注意我最近发现只有事件和函数的on版本的问题。 在jQuery 1.10.3中，似乎不应该在它应该的时候触发。

Answer 2

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

删除这行代码：

$('.getmore').remove();

Answer 3

• 检查您的firebug控制台是否有任何错误
• 删除此行$('.getmore').remove();
• 将click事件Delegate给元素的static parent或document 。

尝试，

$(document).on("click",'.getmore', function( event ) {

});

Answer 4

只需尝试实时或绑定“on”：

$('.getmore').live('click',function(){
}

要么

$('.getmore').bind('click',function(){
}