Добавление ответа jQuery AJAX на существующий DIV

Question

Этот HTML-код, который отображает первые два комментария на моем сайте. Я хочу, если пользователь нажимает кнопку Load more comments, он должен загружать извлеченные комментарии, которые возвращаются через jQuery AJAX, и добавлять их к двум divs в .comment_data div, но он не работает, хотя AJAX, похоже, возвращает ожидаемый результат ,

Это HTML-код:

<div class = 'feeds'> 
    <div class = 'comments'> 
    <div class = 'comment_data> 
    <div class = 'per_comment'> 
     <p> slideToggle!</p> 
    </div> 
    <div class = 'per_comment'> 
     <p> classToggle!</p> 
    </div> 
    <button class='morecomments' value='7' name = 'more' type='submit'> 
    Load more comments</button> 
    </div> 
</div> 
</div> 

И это код AJAX:

$(".morecomments").click(function() { 
var post_id = $(this).val(); 
var request = $.ajax({ 
    url: "comments.php", 
    type: "POST", 
    data: { post : post_id }, 
    dataType: "html" 
}); 
request.done(function(msg) { 
    $(this).prev('.per_comment').html(msg); 
}); 
}); 

И код comments.php:

if(isset($_POST['post'])) 
{ 
    $post_id = $_POST['post']; 
    $qry = "SELECT user_id, comment FROM comments WHERE post_id = ? ORDER BY time DESC LIMIT 1, 1000"; 
$q = $conn->prepare($qry) or die("ERROR: " . implode(":", $conn->errorInfo())); 
$q->bindParam(1, $post_id); 
$q->execute(); 
if($commentz = $q->fetchAll()){ 
foreach ($commentz as $comment){ 
    echo "<div class = 'per_comment'>"; 
     echo "<p>". $comment[0] ." ". $comment[1] . "</p>"; 
    echo "</div>"; 
    } 
    } 
    } 

Answer 1

Попробуйте следующее:

$(".morecomments").click(function() { 

    var $this = $(this);  

    var post_id = $(this).val(); 
    var request = $.ajax({ 
    url: "comments.php", 
    type: "POST", 
    data: { post : post_id }, 
    dataType: "html" 
    }); 
request.done(function(msg) { 
    $this.prev('.per_comment').html(msg); 
    }); 

});

Answer 2

this не так, как вы думаете. Попробуйте установить свойство context параметров ajax:

$(".morecomments").click(function() { 
    var post_id = $(this).val(); 
    var request = $.ajax({ 
     url: "comments.php", 
     type: "POST", 
     data: { 
      post: post_id 
     }, 
     dataType: "html", 
     context: this 
    }); 
    request.done(function (msg) { 
     $(this).prev('.per_comment').html(msg); 
    }); 
});