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

＆GT;

ajax调用工作一次，此后无法点击。我没有太多关于ajax和javascript的知识，解释得到赞赏。

Answer 1

请尝试使用on的延迟语法：

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

这将在DOM更改后继续存在。这个答案假定您加载的数据包含一个class="getmore"的对象，因为您在成功时将其从DOM中删除。如果不是，则需要按remove的建议删除NewInTheBusiness，但可能会将其替换为empty()，以取消加载进度。

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

Answer 2

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

删除这行代码：

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

Answer 3

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

尝试，

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

});

Answer 4

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

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

或

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

Ajax脚本加载/只显示一次

4 个答案: