jQuery: загрузка содержимого AJAX в родительский элемент this

Question

Я пробовал многочисленные способы нацеливания на родительский элемент и / или сам объект JS при инициировании супер простого вызова Ajax. У меня есть 3 div с тем же классом, не более того. Когда я нажимаю один из них, я пытаюсь получить .html (responseHere) для этого DIV, чтобы просто изменить содержимое в нем, но я не могу найти способ выбрать его без указания идентификатора и т. Д.

Javascript:

$(document).ready(function(){

$('.box').click(function(){

    $.get('ajax.php', function(data){
        $(this).html(data);
    }, 'json');



  });   
});

PHP:

<?php

$var = 'This is some new content!';

echo json_encode($var);

?>

HTML:

<div class="box">
    Click me to change my content
</div>

РЕДАКТИРОВАТЬ: Когда я предупреждаю () значение $ (это), я только получаю [объект объекта]

Answer 1

Вы должны сохранить ссылку на выбранный элемент. Внутри обратного вызова Ajax this ссылается на объект window:

$('.box').click(function(){
    var self = this;
    $.get('ajax.php', function(data){
        $(self).html(data);
    }, 'json');
});

Кроме того, json_encode не будет работать, вы должны передать массив или объект, но не строку. Либо создайте правильный JSON:

$var = array('This is some new content!');

echo json_encode($var);

Кажется, простая строка действительно допустима JSON .

Нет причины звонить json_encode здесь. Вы можете просто вернуть текст:

echo $var;

(что означает, что вам также нужно изменить тип данных с json на text в вызове Ajax)

Answer 2

Ваша проблема в вызове Ajax, this - это объект xhr, а не .box.

Хранить $box = $(this); и позже делать $box.html(data);

Answer 3

$('.close-btn').on('click touch',function () {
    // store this to a variable for later use
    var cc = $(this);
    $.ajax({
        url:'del.php',
        type:'POST',
        data:{id:this.id},
        dataType:'html',
        timeout:1000,
        error:function () {
            console.log('close failed');
        },
        success:function () {
            console.log(cc);
            cc.remove();
        }
    });
})

Привет, посмотрите на мой код, это то, что вам нужно, сохраните его в переменной (cc), и в случае успеха ajax мы поместим в него переменную (cc), и, наконец, вы получите ответ.