jQuery के क्लोन () नहीं है घटना बाइंडिंग क्लोनिंग, यहां तक ​​कि () के साथ


100

मैंने मोबाइल वेब एप्लिकेशन में उपयोग के लिए कस्टम jQuery ईवेंट की एक श्रृंखला बनाई है। वे महान काम करते हैं और उनका परीक्षण किया गया है। हालांकि, मैं एक छोटी सी समस्या में भाग गया हूं जिसे समझने में मुझे परेशानी हो रही है।

मैं .clone()DOM के भीतर कुछ तत्वों का उपयोग कर रहा हूं , जिनमें एक बटन होता है। बटन में कुछ कस्टम ईवेंट हैं जो इसके लिए बाध्य हैं (ईवेंट का उपयोग करने के लिए बाध्य हैं .on()), लेकिन। दुर्भाग्य से, जब मैं jQuery का उपयोग करता हूं .clone(), तो बाइंडिंग संरक्षित नहीं होती हैं, और मुझे उन्हें फिर से जोड़ना होगा।

क्या किसी को इससे पहले सामना करना पड़ा है, क्या किसी को संभावित काम के बारे में पता है? मैंने सोचा था कि उपयोग .on()करना उन तत्वों के लिए बाध्यकारी को संरक्षित करना था जो अब मौजूद हैं, या भविष्य में हैं?


"मुझे लगा कि .on () का उपयोग उन तत्वों के लिए बाध्यकारी को संरक्षित करना था जो अब मौजूद हैं, या भविष्य में?" - यह बहुत कम है .clone; यदि आप एक अतिरिक्त चयनकर्ता को पास करते हैं तो यह jQuery का इवेंट डेलिगेशन लॉजिक है और काम करता है .on
21

जवाबों:


213

मुझे लगता है कि आपको .clone () विधि के इस अधिभार का उपयोग करना चाहिए :

$element.clone(true, true);

क्लोन ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents : एक बूलियन दर्शाता है कि क्या ईवेंट हैंडलर और डेटा को तत्वों के साथ कॉपी किया जाना चाहिए। मूल मूल्य गलत है।

deepWithDataAndEvents : एक बुलियन दर्शाता है कि क्या क्लोन किए गए तत्व के सभी बच्चों के लिए घटना संचालकों और डेटा को कॉपी किया जाना चाहिए। डिफ़ॉल्ट रूप से इसका मान पहले तर्क के मूल्य से मेल खाता है (जो गलत के लिए चूक करता है)।


खबरदार जो .on()वास्तव में घटनाओं को लक्ष्य से बांधता नहीं है, लेकिन जिस तत्व को आप सौंप रहे हैं। इसलिए यदि आपके पास:

$('#container').on('click', '.button', ...);

घटनाओं को वास्तव में बांध दिया जाता है #container। जब किसी .buttonतत्व पर क्लिक होता है, तो वह उस #containerतत्व तक पहुँच जाता है, जिस तत्व ने घटना को ट्रिगर किया है, उसका चयनकर्ता पैरामीटर पर मूल्यांकन किया जाता है .on()और यदि यह मेल खाता है, तो ईवेंट हैंडलर निष्पादित होता है। इस तरह से इवेंट डेलिगेशन काम करता है।

यदि आप तत्व #container को क्लोन करते हैं, तो आपको .on()संरक्षित किए जाने वाले बाइंडिंग के लिए घटनाओं और डेटा के साथ गहरा क्लोन करना होगा।

यह आवश्यक नहीं होगा यदि आप के .on()माता-पिता पर उपयोग कर रहे थे #container


20
.clone()स्वीकार किए गए तर्कों को कभी नहीं जाना था । एफएमएल। आपकी सहायता के लिए धन्यवाद।
बेन्म

1
@DidierGhys धन्यवाद, मैं .clone()क्लोनिंग .data()( data-xxxx="somedata"डोम में दोनों और डेटा नहीं) के साथ संघर्ष कर रहा हूँ .. यह इसे भी ठीक करता है!
रिचर्ड डी विट

मैंने यह सवाल पूछा , लेकिन किसी ने भी मुझे जवाब नहीं दिया। क्या आप मेरी मदद कर सकते हैं?
अली सोल्टानी

बहुत बढ़िया, मुझे clickनए क्लोन किए गए डिव को जोड़ने के लिए एक कार्यक्रम बनाना था । readyकाम नहीं कर रहा था
csandreas1

4

आपको इस तथ्य से अवगत होना चाहिए कि गहरी क्लोनिंग कार्यक्षमता 1.5 jQuery संस्करण में जोड़ा गया था।

इस विषय पर अधिक जानकारी:

http://api.jquery.com/clone/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.