JQuery пост не меняет значение в ответе

Question

У меня есть несколько jquery, который запускается при нажатии на ссылку (ниже). Это позволяет отправлять данные в базу данных mysql, а затем обновлять значение определенного <p>. Тем не менее, это не работает. Я добавил alert(response) и получаю правильный результат, но <p> не меняется, что, вероятно, означает, что я использую неправильный селектор.

Jquery:

$('.upVote').click(function(e){

    e.preventDefault();

        answer_id = $(this).siblings('.record_id').attr('value');

        $.post('../answerrating.php' , {answer_id: answer_id} , function(response){

            $(this).prev('.ratingBox').val(response);
        });

});

HTML:

<p class='ratingBox'> $answerrating[$f]</p>
                     <a href='#' class='upVote'>Upvote</a> <a href='#' class='downVote'>Downvote</a>
                    <input type='hidden' name='record_id' value='$answerid[$f]' class='record_id' />

Answer 1

попробуйте это.

$('.upVote').click(function(e){    
    e.preventDefault();    
    var target_elem = $(this).prev('.ratingBox');
        answer_id = $(this).siblings('.record_id').attr('value');    
        $.post('../answerrating.php' , {answer_id: answer_id} , function(response){    
            target_elem.text(response);
        });    
});

Answer 2

this не будет ссылаться на элемент, который был нажат внутри вашего обратного вызова AJAX. Попробуйте сохранить контекст обработчика событий и использовать его в функции обратного вызова.

Кроме того, вы должны использовать .text() или .html() при изменении содержимого элементов, не являющихся input:

$('.upVote').click(function(e){
    var self = this;

    e.preventDefault();

        var answer_id = $(this).siblings('.record_id').attr('value');

        $.post('../answerrating.php' , {answer_id: answer_id} , function(response){

            $(self).prev('.ratingBox').html(response);
        });

});

Answer 3

Вероятно, ошибка связана с тем, что значение специальной переменной this внутри обратного вызова .post() s почти наверняка не является элементом DOM, на который отвечал обработчик события click.

Чтобы решить эту проблемуустановите переменную для значения this в обратном вызове клика и обратитесь к нему в обратном вызове успеха.В целом, это хорошая практика, когда вы не уверены на 100%, какое значение будет иметь this, поскольку оно значительно варьируется в зависимости от контекста.

$('.upVote').click(function(e){
    var button = this;
    e.preventDefault();    
    answer_id = $(this).siblings('.record_id').attr('value');

    $.post('../answerrating.php' , {answer_id: answer_id} , function(response){
        $(button).prev('.ratingBox').val(response);
    });
});