Обновить текст элемента при нажатии

Question

$("#readMain").delegate("span", "click", function() { 
    var toSend = $(this).text(); 
    $(this).text(function() {return "test1";}); 
    $.post('/render/', {'word': toSend}, function(data){ 
     $(this).text(data); 
     alert(data); //for testing 
    }); 
}); 

Я пытаюсь обновить это слово. Он работает отлично в первый раз (он меняется на «test1»), но после почтового вызова он больше не работает?

Что я делаю неправильно

Answer 1

Это в этом контексте относится к «интервалу» в первый раз, второй раз относится к объекту окна. Кроме того, делегат является старым jQuery, теперь вы можете использовать '.on'.

Вы урожденная обновить функцию:

$("#readMain").on("click", "span", function() { 
    var span = $(this); 
    var toSend = span.text(); 
    $.post('/render/', {'word': toSend}, function(data){ 
     span.text(data); 
     alert(data); //for testing 
    }); 
}); 

Answer 2

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

//Store the reference 
var _this = $(this); 
$.post('/render/', {'word': toSend}, function(data){ 
    //Use it later 
    _this.text(data); 
    alert(data); //for testing 
}); 

---

Кроме того, delegate() осуждается использование .on()

$("#readMain").on("click", "span", function() { 
    //Store the reference 
    var _this = $(this); 

    var toSend = _this.text(); 
    _this.text("test1"); 
    $.post('/render/', {'word': toSend}, function(data){ 
     _this.text(data); 
     alert(data); //for testing 
    }); 
}); 

Answer 3

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

$("#readMain").delegate("span", "click", function() { 
    var span = $(this); 
    var toSend = span.text(); 
    span.text(function() {return "test1";}); 

$.post('/render/', {'word': toSend}, function(data){ 
     span.text(data); 
     alert(data); //for testing 
    }); 
}); 

Answer 4

Контекст в обратном вызове $ .post будет изменен. Вы можете объявить переменную и задать контекст. См. Код ниже.

$("#readMain").on("span", "click", function() { 
    var self = $(this), 
     toSend = self.text(); 
    self.text(function() {return "test1";}); 
    $.post('/render/', {'word': toSend}, function(data){ 
     self.text(data); 
     alert(data); //for testing 
    }); 
});