गतिशील रूप से जोड़े गए सामग्री को पंजीकृत करने के लिए jQuery पर() प्राप्त करने में असमर्थ

मैं jQuery में ऑन() विधि के लिए काफी नया हूं लेकिन मेरे पास इसका उपयोग करने की आवश्यकता है।गतिशील रूप से जोड़े गए सामग्री को पंजीकृत करने के लिए jQuery पर() प्राप्त करने में असमर्थ

मेरे पास विशिष्ट बटन पर क्लिक करने के लिए दो कार्य हैं। प्रत्येक फ़ंक्शन पृष्ठ पर मूल रूप से किसी भी तत्व पर काम करता है लेकिन किसी भी गतिशील रूप से जोड़े गए सामग्री (उसी बटन के अधिक) पर नहीं। मैं समझता हूं कि मुझे यहां और Google पर अन्य उत्तरों पढ़ने के बाद ऑन() फ़ंक्शन का उपयोग करने की आवश्यकता है लेकिन मुझे अभी भी समस्या हो रही है। वैसे भी, कोड:

jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("apaz clicked"); 
    } 
}, "a.azaz"); 


jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("mapaz clicked"); 
    } 
}, "a.mapaz");

किसी भी मदद की सराहना की जाएगी, मेरे बालों को यहां फाड़ कर।

स्रोत

2012-03-14 tristyb

क्या '# THEBUTTONS' तत्व आपके गतिशील' 'तत्वों का पूर्वज है? –

तो तत्व #THEBUTTONS आपके गतिशील रूप से जोड़े गए '' तत्वों का एक स्थिर पूर्वज है? क्या आप वाकई "ए.जाज़" हैं और "ए.एपज़" नहीं हैं? '.on (' क्लिक करें ',' a.azaz ', फ़ंक्शन (ईवेंट) {...})' इसके बजाए ... इस आविष्कार शैली के लिए अधिक लोगों का उपयोग किया जाता है – devnull69

आपका कोड मेरे लिए काम करता है: http: // jsfiddle .NET/tSUg7 /, शायद यह एचटीएमएल है? –

.on() अनिवार्य रूप से दो स्वाद हैं: एक जो .bind() जैसा कार्य करता है, और दूसरा जो .delegate() जैसा कार्य करता है।

आपकी समस्या के लिए, आप delegate संस्करण का उपयोग करना चाहते हैं। एक संदर्भ के रूप में, on हस्ताक्षर इस तरह हैं:

// bind 
$(element-selector).on(event, handler) 

// delegate 
$(container-selector).on(event, element-selector, handler)

इस के साथ गति प्राप्त करने के लिए सबसे अच्छा तरीका शायद to read up on delegate है, यह क्या है, कैसे अपने इस्तेमाल किया है, और फिर on है कि लागू होते हैं।

स्रोत

2012-03-14 09:24:39

प्रतिक्रिया के लिए धन्यवाद। फिर यह (और इसलिए @ एन्थनी ग्रिस्ट ने भी सुझाव दिया) केवल मूल तत्वों को क्लिक करने योग्य बनाता है। अगर यह कोई मदद है तो मैं कहीं भी .html() विधि के साथ तत्व को पकड़ रहा हूं और इसे कहीं और फिर से सम्मिलित कर रहा हूं। – tristyb

दिलचस्प बात यह है कि यदि कंटेनर चयनकर्ता उस सामग्री से कहीं अधिक हो जाता है जिसे मैंने गतिशील रूप से जोड़ा है, तो शरीर की तरह, फिर भी यह काम करने के लिए बंद हो जाता है। – tristyb

यदि आप केवल HTML को पकड़ रहे हैं, तो उन तत्वों से जुड़े ईवेंट हैंडलर को इसके साथ नहीं ले जाया जाता है। आप '$() क्लोन (सत्य, सत्य) 'के बजाय, या एक कंटेनर के अंदर नए तत्वों को थप्पड़ मारने के लिए बेहतर करेंगे जहां आपने' प्रतिनिधि 'आदेश असाइन किया है। –

.on() का उपयोग करने के दो तरीके हैं, और आप गलत प्रकार का उपयोग कर रहे हैं।

आप $('selector for elements you want the event handler bound to').on('event', function() {...});

का उपयोग कर तत्वों को सीधे ईवेंट हैंडलर्स बाध्य कर सकते हैं या, यदि आप, घटनाओं प्रतिनिधि कर सकते हैं में एक आवरण तत्व यह है कि इस तरह के एक div के रूप में गतिशील रूप से जोड़ा तत्वों, के सभी या में शामिल होंगे पर .on() फोन करके सबसे खराब मामला, <body> तत्व।

<div id="wrapper"> 
    <a href="#" class="link">Test link</a> 
</div> 

$('#wrapper').on('click', '.link', function(e) { 
    // code to handle the click event on the link here 
});

ईवेंट हैंडलर वास्तव में <div id="wrapper"> तत्व द्वारा नियंत्रित किया जाता है एक बार घटना यह अप करने के लिए bubbled है, लेकिन समारोह केवल यदि मूल लक्ष्य प्रदान की चयनकर्ता से मेल खाता कहा जाता है: कोड कुछ इस तरह दिखेगा। इस विधि के साथ, आप div को link कक्षा के साथ गतिशील रूप से अतिरिक्त तत्व जोड़ सकते हैं, और जब फ़ंक्शन पर क्लिक किया जाता है तो फ़ंक्शन भी चलाया जाएगा।

स्रोत

2012-03-14 09:24:56

प्रश्नकर्ता एक हैंडलर मानचित्र नहीं है, न कि एक हैंडलर, इसलिए 'चालू (eventMap, selector)' उपयोग करने का सही रूप है। –

@ FrédéricHamidi अच्छा बिंदु, जाहिर है मैंने इस सवाल को पूरी तरह से पर्याप्त नहीं पढ़ा। –

गतिशील रूप से जोड़े गए सामग्री को पंजीकृत करने के लिए jQuery पर() प्राप्त करने में असमर्थ

उत्तर

संबंधित मुद्दे