반응형
$ (this) AJAX 내부에서 작동하지 않음
나는 $ (this)를 사용하도록 onclick을 사용하는 오래된 코드를 변경하려고합니다. 문제는 $ (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");
}
}
});
});
문제
콜백 내에서 이벤트 핸들러가 바인딩 된 요소가 아니라 Ajax 호출 this
의 jqXHR
객체를 참조 합니다. JavaScript에서 작동 하는 방법에 대해 자세히 알아보십시오this
.
솔루션
ES2015 +를 사용할 수있는 경우 화살표 기능 을 사용하는 것이 가장 간단한 옵션 일 것입니다.
$.ajax({
//...
success: (json) => {
// `this` refers to whatever `this` refers to outside the function
}
});
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 (
$.ajaxSettings
merged with the settings passed to$.ajax
). (...)
$.ajax({
//...
context: this,
success: function(json) {
// `this` refers to the value of `context`
}
});
or use $.proxy
:
$.ajax({
//...
success: $.proxy(function(json) {
// `this` refers to the second argument of `$.proxy`
}, this)
});
or keep a reference to the value of this
outside the callback:
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
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) {
}
});
참고URL : https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working
반응형
'Programing' 카테고리의 다른 글
입력 유형 = 암호, 브라우저가 암호를 기억하지 못하도록합니다. (0) | 2020.08.25 |
---|---|
PHP json_decode ()는 유효한 JSON으로 NULL을 반환합니까? (0) | 2020.08.25 |
Python 간단한 if 또는 논리 문 (0) | 2020.08.25 |
함수에서 조기 반환의 효율성 (0) | 2020.08.25 |
AngularJs에서 동적 범위 변수 설정-범위. (0) | 2020.08.25 |