$(this) dentro del éxito de AJAX no funciona
Estoy intentando cambiar un código antiguo que usa onclick para poder usar $(this). El problema es que $(this) no funciona cuando está dentro del éxito. ¿Hay alguna forma de hacer esto sin configurarlo como var?
$('.addToCart').click(function() {
$.ajax({
url: 'cart/update',
type: 'post',
data: 'product_id=' + $(this).attr("data-id"),
dataType: 'json',
success: function(json) {
if (json['success']) {
$(this).addClass("test");
}
}
});
});
Problema
Dentro de la devolución de llamada, thisse refiere al jqXHRobjeto de la llamada Ajax, no al elemento al que estaba vinculado el controlador de eventos. Obtenga más información sobre cómo thisfunciona en JavaScript .
Soluciones
Si ES2015+ está disponible para usted, entonces usar una función de flecha probablemente sería la opción más simple:
$.ajax({
//...
success: (json) => {
// `this` refers to whatever `this` refers to outside the function
}
});
Puedes configurar la contextopción :
Este objeto se convertirá en el contexto de todas las devoluciones de llamada relacionadas con Ajax. De forma predeterminada, el contexto es un objeto que representa la configuración de ajax utilizada en la llamada (
$.ajaxSettingsfusionada con la configuración pasada a$.ajax). (...)
$.ajax({
//...
context: this,
success: function(json) {
// `this` refers to the value of `context`
}
});
o usar $.proxy:
$.ajax({
//...
success: $.proxy(function(json) {
// `this` refers to the second argument of `$.proxy`
}, this)
});
o mantener una referencia al valor thisfuera de la devolución de llamada:
var element = this;
$.ajax({
//...
success: function(json) {
// `this` refers to the jQXHR object
// use `element` to refer to the DOM element
// or `$(element)` to refer to the jQuery object
}
});
Relacionado
- ¿Cómo acceder al "esto" correcto dentro de una devolución de llamada?
