AJAX की सफलता के अंदर $ (यह) काम नहीं कर रहा है

Question

मैं कुछ पुराने कोड को बदलने की कोशिश कर रहा हूं जो कि ऑनक्लिक का उपयोग करता है ताकि मैं $ (इस) का उपयोग कर सकूं। समस्या यह है कि सफलता के अंदर $ (यह) काम नहीं कर रहा है। वहाँ वैसे भी यह एक 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");

            }   
        }
    });

});

Answer 1

संकट

कॉलबैक के अंदर, अजाक्स कॉल thisके jqXHRऑब्जेक्ट को संदर्भित करता है , न कि उस इवेंट हैंडलर को जिसके लिए बाध्य किया गया था। जावास्क्रिप्ट में कैसे thisकाम करता है, इसके बारे में और जानें ।

---

समाधान

यदि ES2015 + आपके लिए उपलब्ध है, तो तीर फ़ंक्शन का उपयोग करना संभवतः सबसे आसान विकल्प होगा:

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

आप contextविकल्प सेट कर सकते हैं :

इस ऑब्जेक्ट को सभी अजाक्स-संबंधित कॉलबैक के संदर्भ में बनाया जाएगा। डिफ़ॉल्ट रूप से, संदर्भ एक ऑब्जेक्ट है जो कॉल में उपयोग किए गए अजाक्स सेटिंग्स का प्रतिनिधित्व करता है ( $.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
    }
});

---

सम्बंधित

• कॉलबैक के अंदर सही `this` को कैसे एक्सेस करें?

Comments

जैसा कि मैं जावास्क्रिप्ट के साथ बेहतर बन रहा हूं और बड़ी और बड़ी जटिल परियोजना का निर्माण कर रहा हूं, मैंने आखिरकार इसे कुछ हद तक समझ लिया है, लेकिन इस जवाब को देखने से मुझे यह जानने में बहुत मदद मिलती है कि मेरी धारणाएं सही हैं और न केवल सिद्धांत हैं, इसलिए मैं व्यक्तिगत रूप से भी आपको धन्यवाद देता हूं अगर एसओ टिप्पणी नीति के खिलाफ है! =)

— जेसनडेविस

मैं (और धन्यवाद), ये तीनों विकल्प काम करते हैं। मैं ajax संदर्भ विकल्प के बारे में नहीं जानता था। एक छोटी सी खामी यह है कि मेरा आईडीई (Phststorm) इस विकल्प को नहीं पहचानता है कि यह जेएस क्लोजर में इस तरह से मदद करने वाले स्कोप इश्यू को हल करता है। प्रॉक्सी रैपर को जोड़ने से चेतावनी दूर हो जाती है, इसलिए संदर्भ: यह निश्चित रूप से एक विशाल चाल में एक अज्ञात चाल होनी चाहिए।

— स्काइपिलॉट

संदर्भ विकल्प के लिए Ditto। पूरी तरह से काम किया।

— अन्ना_मीडियागर्ल

बहुत बढ़िया उदाहरण!

— जव्वाद रिज़वान

Answer 2

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


});