jQuery के बाद के तरीके नए बनाए गए तत्वों के साथ काम नहीं कर रहे हैं

Question

जैसा कि मैं बता सकता हूं, निम्नलिखित कोड को काम करना चाहिए, <div> तत्व बनाना, और फिर <p> तत्व बनाना; अभिव्यक्ति का परिणाम दो तत्वों के साथ एक jQuery ऑब्जेक्ट में होना चाहिए:

$("<div>first element's content</div>").after("<p>second element's content</p>"); 

हालांकि, मुझे जो मिलता है वह बहुत अलग है। The documentation (शीर्षक "डिस्कनेक्ट किए गए डोम नोड्स डालने" शीर्षक देखें) मुझे बताता है कि उपर्युक्त कोड का परिणाम एक jQuery ऑब्जेक्ट में होना चाहिए, दोनों HTML स्निपेट को पकड़ना और दो डोम तत्वों का निर्माण करना चाहिए। लेकिन, जो मैंने प्राप्त किया है, jQuery के कई अलग-अलग संस्करणों में, 1.4 से ऊपर, एक jQuery ऑब्जेक्ट केवल 1 नोड के साथ है। हालांकि, निम्नलिखित कोड ठीक काम करता है, लौटने (मैं क्या विश्वास करते हैं) सही jQuery वस्तु, दो तत्वों के अंदर:

$("<div></div>").after("<p>second element's content</p>"); 

और यह उदाहरण के रूप में अच्छी तरह से काम करता है:

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>"); 

ऐसा लगता है .after() यदि पहला डोम नोड बनाया जा रहा है तो विधि ठीक काम करती है, लेकिन जब यह नहीं होती है (इसके बाद के बाद वाले डोम नोड्स की सामग्री के बावजूद)।

क्या मुझे jQuery के आंतरिक, quirky DOM मुद्दों और/या जावास्क्रिप्ट विशिष्टताओं के बारे में कुछ याद आ रहा है, या यह बस एक jQuery बग है जो संस्करण 1.4 से 1.7 के माध्यम से जारी है?

(Here's a meager JSFiddle बहुत स्पष्ट रूप से इस मुद्दे का प्रदर्शन है।)

Answer 1

यह jQuery < 1.9 में एक ज्ञात बग था। http://bugs.jquery.com/ticket/8759

jQuery> = 1.9 में देखें, following information from the upgrade guide ध्यान दिया जाना चाहिए:

पहले 1.9, .after(), .before(), और .replaceWith() करने के लिए वर्तमान jQuery में जोड़ने के लिए या नोड्स बदलने का प्रयास करता है, तो प्रथम नोड स्थापित करेगा सेट में किसी दस्तावेज़ से कनेक्ट नहीं था, और उन मामलों में मूल सेट के बजाय एक नया jQuery सेट लौटाता है। इसने कई विसंगतियों और पूरी तरह से बग बनाए - यह विधि अपने तर्कों के आधार पर एक नया परिणाम नहीं दे सकती है या नहीं! 1.9 के रूप में, ये विधियां हमेशा मूल अनमोडिफाइड सेट लौटाती हैं और .after(), .before(), या .replaceWith() को किसी नोड पर बिना किसी प्रभाव के उपयोग करने का प्रयास करती है - यानी, न तो सेट या नोड्स को बदल दिया जाता है।

Answer 2

उपयोग add() संग्रह करने के लिए वस्तुओं जोड़ने के लिए। मैं after() अधिक डीओएम तत्वों में अधिक उपयोग करता हूं जो पहले से मौजूद हैं या वे एक चर में कैश किए गए हैं, लेकिन अधिकांश समय, यदि आप गतिशील मार्कअप के साथ काम करते हैं तो समतुल्य insertAfter() का उपयोग करने के लिए अधिक व्यावहारिक है।

$("<div>first element's content</div>").add("<p>second element's content</p>"); 

संपादित करें:

यह काम करता है ...

var $el = $('<div/>', { 
    text: 'hey there' 
}).after('<p>Lorem</p>'); 

Answer 3

मैंने पाया मैं .after() के स्थान पर .add() साथ कभी कभी होने मुद्दों अभी भी था, तो एक और आसान तरीका यह बग के आसपास पाने के लिए एक फेंक दूर आवरण तत्व, .append() भाई तत्वों बनाने के लिए, और .html() का उपयोग सिर्फ पाने के लिए करने के लिए है रैपर की आंतरिक सामग्री।

उदाहरण:

$('body').append(
    $('<span/>').append(
     $("<div>first element's content</div>") 
    ).append(
     $("<p>second element's content</p>") 
    ).html() 
); 

इस ऐड <div> और <p> लेकिन बाहरी <span> छोड़ दी जाएगी। मैंने पाया है कि यह आमतौर पर .append() के साथ ठीक काम करता है लेकिन .appendTo()