jQuery क्लिक ईवेंट "मॉड्यूल पैटर्न"

Question

का उपयोग करते समय काम नहीं कर रहा है। मैं एक इंटरमीडिएट फ्रंट एंड जेएस डेवलपर हूं और मैं क्रिस कोयियर here द्वारा उल्लिखित मॉड्यूल पैटर्न का प्रयास कर रहा हूं।

लेकिन जब मैं सेटिंग्स में एक jQuery चयनकर्ता संग्रहीत करता हूं, तो मैं एक क्लिक ईवेंट ट्रिगर करने के लिए इसका उपयोग करने में असमर्थ हूं। मेरी टिप्पणियों के साथ नीचे कोड देखें ... किसी भी मदद की बहुत सराहना की है!

var s, 
TestWidget = { 
    settings: { 
    testButton: $("#testing") 
    }, 
    init: function() { 
    s = this.settings; 
    this.bindUIActions(); 
    }, 
    bindUIActions: function() { 
    console.log(s.testButton); // This works: [context: document, selector: "#testing", constructor: function, init: function, selector: ""…] 

    //This doesn't work - why????? 
    s.testButton.click(function() { 
     //Why isn't this triggered? 
     alert('testButton clicked'); 
    }); 

    /*This works, obviously: 
    $('#testing').click(function() { 
     alert('testButton clicked'); 
    }); 
    */ 

    } 
}; 
$(document).ready(function() { 
    TestWidget.init(); 
}); 

Answer 1

समस्या यह है कि आप को प्रारंभ $("#testing") से पहले डोम तैयार है, तो यह jQuery वस्तु खाली है।

एक सरल समाधान है कि आप अपने सभी कोड को तैयार कॉलबैक में रखें।

एक और एक

settings: { 
    }, 
    init: function() { 
    s = this.settings; 
    s.testButton = $("#testing"); 
    this.bindUIActions(); 
    }, 

साथ

settings: { 
    testButton: $("#testing") 
    }, 
    init: function() { 
    s = this.settings; 
    this.bindUIActions(); 
    }, 

को बदलने के लिए होगा लेकिन यह कारण है कि आप इस तरह के एक सरल बात के लिए बहुत बहुत कोड का उपयोग पाने के लिए मुश्किल है। आप यहां पैटर्न का अधिक उपयोग कर रहे हैं और यह वास्तव में साफ नहीं है क्योंकि आपके पास दो वैश्विक चर s और TestWidget हैं जब कोई पहले से ही बहुत कुछ होगा।

TestWidget = (function(){ 
    var settings = {}; 
    return { 
     init: function() { 
      settings.testButton = $("#testing"); 
      this.bindUIActions(); 
     }, 
     bindUIActions: function() { 
      console.log(settings.testButton); 
      settings.testButton.click(function() { 
       alert('testButton clicked'); 
      }); 
     } 
    } 

})(); 
$(document).ready(function() { 
    TestWidget.init(); 
}); 

settings बंद में रखा जाता है और वैश्विक में लीक नहीं करता:

यहाँ अपने कोड का एक मामूली बदलाव जो हो सकता है, मेरी राय, क्लीनर में, जबकि अभी भी मॉड्यूल (IIFE variant) का उपयोग कर रहा है नाम स्थान। ध्यान दें कि यदि आप मॉड्यूल के साथ और अधिक नहीं करते हैं तो भी यह संस्करण समझ में नहीं आता है।