डायनामिक एलिमेंट जोड़ने के बाद जावास्क्रिप्ट इवेंट ट्रिगर नहीं हो रहे हैं

आप एक समस्या का सामना कर रहे हैं जहां DOM में नए एलिमेंट जोड़ने के बाद जावास्क्रिप्ट इवेंट सक्रिय नहीं हो रहे हैं . ऐसा इसलिए है क्योंकि jQuery केवल तब मौजूद तत्वों को पहचानता है जब यह प्रारंभ में पेज लोड के दौरान चलता है।

इसे हल करने के लिए, आपको गतिशील तत्वों से घटनाओं को कैप्चर करने के लिए इवेंट प्रतिनिधिमंडल को नियोजित करने की आवश्यकता है। इवेंट डेलिगेशन में डीओएम में उच्च स्तर पर इवेंट को पकड़ना शामिल है जो पेज लोड के दौरान पहले से ही मौजूद था। यह नए जोड़े गए तत्वों से ईवेंट को बबल करने और प्रबंधित करने की अनुमति देता है।

आपके मामले में, आप क्लिक इवेंट को मूल तत्व को सौंप सकते हैं जो पेज लोड के दौरान मौजूद था। उदाहरण के लिए, आप on() विधि का उपयोग करने के लिए अपना JavaScript कोड इस प्रकार बदल सकते हैं:

$(document).on('click', '.races', function(e) {
  // Your code here
});

इस तरह, ".races" वर्ग के साथ जोड़े गए किसी भी नए तत्व को क्लिक इवेंट हैंडलर विरासत में मिलेगा। इवेंट डेलिगेशन लागू करते समय क्लिक() के बजाय on() विधि का उपयोग करना याद रखें।