$(this)内部的 AJAX 成功不工作

我试图改变一些使用 onclick 的旧代码，以便我可以使用 $(this)。问题是 $(this)在成功内部不起作用。是否可以在不将其设置为 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");


}
}
});


});
58027 次浏览
小开
最佳答案

问题

在回调中，this引用 Ajax 调用的 jqXHR对象，而不是事件处理程序绑定到的元素。了解更多关于 this如何在 JavaScript 中工作的信息.

Solutions

如果您可以使用 ES2015 + ，那么使用 箭头函数可能是最简单的选择:

$.ajax({
//...
success: (json) => {
// `this` refers to whatever `this` refers to outside the function
}
});

你可以设定 context option:

这个对象将成为所有 Ajax 相关回调的上下文。默认情况下，上下文是表示调用中使用的 ajax 设置的对象($.ajaxSettings与传递给 $.ajax的设置合并)。(...)

$.ajax({
//...
context: this,
success: function(json) {
// `this` refers to the value of `context`
}
});

或使用 $.proxy:

$.ajax({
//...
success: $.proxy(function(json) {
// `this` refers to the second argument of `$.proxy`
}, this)
});

或者在回调函数之外保留对 this值的引用:

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
}
});

相关

小开 
jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
var myStr = jQuery(this).text();
var myArr = myStr.split(" (");
url = 'your url'; // New Code
data = myArr[0];
try {
jQuery.ajax({
url : url,
context: this,
type : 'post',
data : data,
success : function(data) {
if(data){
jQuery(this).html(data);
}else{
jQuery(this).html(myArr[0]);
}
}
});
} catch (e) {
}




});

提交答案