阿賈克斯腳本加載/顯示只有一次

下面是代碼：

 $(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的知識，解釋讚賞。

來源

2014-01-17 stacky

任何錯誤cosole？ –

爲什麼它應該再次被調用？你在第一次調用Ajax後刪除元素$（'。getmore'）... – Justinas

@JustinasJurciukonis可能是變量'data'有那個元素 – rynhe

嘗試的on遞延語法來代替：

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

這將生存DOM變化。這個答案假定您的加載數據包含一個包含class="getmore"的對象，因爲您在成功時將其從DOM中刪除。如果不是，您需要刪除,NewInTheBusiness建議，但可能用empty()取而代之以刪除加載進度。

注意我最近發現on版本的問題只涉及事件和函數。在jQuery 1.10.3中它似乎不應該在它應該發射的時候。

來源

2014-01-17 09:09:32

感謝您將我標記爲代碼！ :) – NewInTheBusiness

這是因爲您成功後刪除了getmore類。

刪除此行的代碼：

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

來源

2014-01-17 09:10:11 NewInTheBusiness

加載器圖像顯示在列表中間的數據發射後，即使它的工作只有一次。 – stacky

@Fastnto由於您將圖像添加到您用作觸發器的相同元素，因此您可能希望在成功後通過$（'。getmore'）。html（'點擊此處再次激發'）而不是去除圖像它。 – NewInTheBusiness

非常感謝我，但是這個答案不正確，因爲載入的數據包含一個帶有class =「getmore」的元素。打電話給我一個幸運的猜測，但我希望是這樣。 –

檢查螢火蟲控制檯的任何錯誤
刪除此行$('.getmore').remove();
Delegate點擊事件元素的static parent或到document。

嘗試，

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

});

來源

2014-01-17 09:10:45

這對我沒有幫助。 – stacky

試試看活的或結合就地「開」：

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

或

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

來源

2014-01-17 10:16:17

阿賈克斯腳本加載/顯示只有一次

回答

相關問題