jQuery AJAX 成功中的 $(this) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6394812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$(this) inside of AJAX success not working
提问by John Magnolia
I am trying to change some old code which uses onclick so that I an use the $(this). The problem is that $(this) is not working when inside the success. Is there anyway to do this without setting it as a var.
我正在尝试更改一些使用 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");
}
}
});
});
回答by Felix Kling
Problem
问题
Inside the callback, thisrefers to the jqXHRobject of the Ajax call, not the element the event handler was bound to. Learn more about how thisworks in JavaScript.
在回调内部，this指jqXHR的是 Ajax 调用的对象，而不是事件处理程序绑定到的元素。详细了解thisJavaScript 的工作原理。
Solutions
解决方案
If ES2015+ is available to you, then using an arrow functionwould probably be the simplest option:
如果您可以使用 ES2015+，那么使用箭头函数可能是最简单的选择：
$.ajax({
//...
success: (json) => {
// `this` refers to whatever `this` refers to outside the function
}
});
You can set the contextoption:
您可以设置context选项：
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call (
$.ajaxSettingsmerged with the settings passed to$.ajax). (...)
该对象将成为所有与 Ajax 相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的 ajax 设置（
$.ajaxSettings与传递给 的设置合并$.ajax）。（……）
$.ajax({
//...
context: this,
success: function(json) {
// `this` refers to the value of `context`
}
});
or use $.proxy:
或使用$.proxy：
$.ajax({
//...
success: $.proxy(function(json) {
// `this` refers to the second argument of `$.proxy`
}, this)
});
or keep a reference to the value of thisoutside the callback:
或保留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
}
});
Related
有关的
回答by Vishal Sanwar
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) {
}
});
