दिलचस्प पोस्ट
पायथन से एचटीएमएल फ़ाइल से पाठ निकालना अपरिभाषित संदर्भ C ++ यह कैसे बताने के लिए कि क्या <video> तत्व वर्तमान में खेल रहा है? आखिरकार जब आप कैच ब्लॉक से एक अपवाद फेंकते हैं? devise में sign_in कार्रवाई के लिए अलग लेआउट कैसे एक निर्देशिका / फाइल / symlink रूबी में एक कमांड के साथ मौजूद है की जांच कैसे करें एकाधिक Servlets को बुलाए हुए एक ही रूप में एकाधिक सबमिट करें बटन ऑटो-स्क्रॉलिंग टेक्स्टव्यू एंड्रॉइड में पाठ को देखने के लिए Has_and_belongs_to_many तालिका में शामिल होने के लिए पटरियों का स्थानांतरण संदर्भ त्रुटि: $ परिभाषित नहीं है सार वर्गों के लिए नामकरण सम्मेलनों एक फ्लोटिंग प्वाइंट नंबर के चिन्ह, मैन्टिसा और एक्सपोनेंट कैसे प्राप्त करें क्यों रैंड ()% 7 हमेशा 0 पर वापस आती है? रीसेट या MySQL रूट पासवर्ड को कैसे बदलें? जावास्क्रिप्ट से टीसीपी सॉकेट्स पर मैं कैसे संपर्क कर सकता हूं?

गतिशील रूप से तैयार किए गए तत्व द्वारा ट्रिगर किए गए ईवेंट ईवेंट हैंडलर द्वारा कैप्चर नहीं किए जाते हैं

मेरे पास एक <div> id="modal" साथ गतिशील रूप से जेनोवा load() विधि के साथ उत्पन्न:

 $('#modal').load('handlers/word.edit.php'); 

word.edit.php में कुछ इनपुट तत्व होते हैं, जो एक मॉडल <div> में लोड होते हैं

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

कौन सा jQuery विधि गतिशील रूप से बनाए गए तत्वों द्वारा ट्रिगर होने वाले हैंडलिंग इवेंट का समर्थन करता है?

नया इनपुट तत्व बनाने के लिए कोड है:

 $('#add').click(function() { $('<input id="'+i+'" type="text" name="translations' + i + '" />') .appendTo('#modal'); 

उपयोगकर्ता के मूल्यों को कैप्चर करने के लिए कोड है:

 $('input').keyup(function() { handler = $(this).val(); name = $(this).attr('name'); 

यह दूसरा कोड ब्लॉक मूल तत्वों के लिए काम करता है, लेकिन इसे नए गतिशील रूप से उत्पन्न तत्वों द्वारा निकाल नहीं दिया गया है।

Solutions Collecting From Web of "गतिशील रूप से तैयार किए गए तत्व द्वारा ट्रिगर किए गए ईवेंट ईवेंट हैंडलर द्वारा कैप्चर नहीं किए जाते हैं"

आपको इस घटना को पृष्ठ के भीतर सबसे निकटतम स्थिर पूर्वज तत्व को सौंपना होगा (यह भी देखें "इवेंट डेलिगेशन को समझना" )। यह बस इसका अर्थ है, जिस तत्व पर आप अपने ईवेंट हैंडलर को बाध्य करते हैं वह पहले से ही उस समय मौजूद हो सकता है जब हेन्डलर बांझ हो, इसलिए गतिशील रूप से उत्पन्न तत्वों के लिए आपको ईवेंट को बुलबुला करने और इसे आगे बढ़ाए जाने की अनुमति देनी चाहिए।

JQuery .on विधि यह करने का तरीका है (या .delegate के पुराने संस्करणों के लिए .delegate ।)

 // If version 1.7 or above $('#modal').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

या पुराने संस्करणों में

 // If version 1.6 or below // note the selector and event are in a different order than above $('#modal').delegate('input', 'keyup', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

ऐसा इसलिए हो रहा है क्योंकि आप ईवेंट को वायर्ड करने के बाद इनपुट तत्व जोड़ रहे हैं। प्रयास करें:

 $('body').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

का उपयोग करना। पर यह सुनिश्चित होगा कि keyup घटना मूल रूप से पृष्ठ पर मौजूद इनपुट के साथ ही साथ गतिशील रूप से जोड़े जाने वाले किसी भी इनपुट के साथ keyup हुई है।

जब आप गतिशील रूप से DOM को बदलते हैं, तो jQuery उनसे ईवेंट हैंडलर्स को संलग्न नहीं करेगा। आपको () और प्रत्यायोजित ईवेंट पर उपयोग करने की आवश्यकता है

आपके इनपुट आइटम के लिए, आपको कुछ की आवश्यकता होगी:

 $("<parentSelector>").on("keyup", "input", function() { handler = $(this).val(); name = $(this).attr('name'); }) 

जहां मूल तत्व चयनकर्ता इनपुट तत्व की तुलना में DOM में कुछ उच्च है, और एक तत्व जो पृष्ठ लोड पर मौजूद है, शायद फ़ॉर्म आईडी या कुछ और

फंक्शन बाइंड पेज लोड में बनाये गये हैं। फ़ंक्शन लाइव () का उपयोग करके गतिशील रूप से बनाए गए तत्वों पर काम करने के लिए उदाहरण:

 $ ("p"). live ("click", function () { // Your function }); 

यदि आपको सभी फार्म तत्वों, विशेष रूप से चुनिंदा बक्से के लिए बदलावों को प्राप्त करने की आवश्यकता है, तो मुझे पता है कि उनका उल्लेख यहां नहीं किया गया है, लेकिन यह पता करने में सहायक है, निम्न कोड का उपयोग करें:

 $(document).on('change', ':input', function () { alert('value of ' + $(this).attr('name') + ' changed') }); 

इसमें सभी input , textarea , select , checkbox , radio आदि को कवर किया जाना चाहिए।