jQuery $ (это) проблемы с $ .post ()

Question

Итак, вот мой код, когда пользователь нажимает кнопку «Follow»:

$('.follow_btn').click(function() {
    $(this).html('<img src = "../assets/style_images/loading.gif">');
    var userId = $(this).attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', {
        userId: userId
    }, function(data) {
        $(this).html(data);
    });
});

Очень рад заменить его загрузочным GIF, как показано в строке 2. Но когда он возвращает данные и заменяетэто с данными, возвращенными в строке 4.

Как я могу это исправить?

Answer 1

Назначьте $(this) переменной вне $.post():

var $this = $(this);

Затем, вместо использования $(this) для добавления данных, используйте только что созданную переменную:

$this.html(data);

Глядя на ваш код еще раз, вы также можете сделать это:

$("#" + userId).html(data);

Поскольку у вас уже есть id вашего элемента.

Answer 2

Внутри $.post, this больше не является вашим элементом. Вам необходимо сохранить его в переменной до $.post.

$('.follow_btn').click(function () {
    var $this = $(this); // Save this, so it can be used inside $.post
    $this.html('<img src = "../assets/style_images/loading.gif">');
    var userId = $this.attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', { userId: userId }, function(data) {
        $this.html(data);
    });
});

Answer 3

$(this) находится вне контекста внутри области действия $.post.Вы должны кэшировать его в переменную и использовать его внутри.

$('.follow_btn').click(function () {
    $this = $(this);
    $this.html('<img src = "../assets/style_images/loading.gif">');
    var userId = $this.attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', { userId: userId }, function(data) {
        $this.html(data); //$this not $(this)
    });
});