2012-02-10 11 views
5

tl; dr: मैं एक डोम तत्व कैसे प्राप्त करूं, जो एक क्लिक हैंडलर द्वारा दिखाई देता है, अंतिम होने के लिए body के करीब से पहले तत्व गतिशील रूप से जेनरेट किए गए तत्वों को जोड़ा जा रहा है?jQuery - गतिशील रूप से जेनरेट किए गए तत्वों के बाद भी डीओएम (शरीर के नजदीक से पहले) में एक तत्व बनाते हैं

अनिवार्य रूप से मैं उस क्लिक को खोलना चाहता हूं जो तत्व खोलता है, इसे डीओएम में भी ले जाया जाता है ताकि कुछ गतिशील तत्वों को जोड़ने के बाद भी शरीर बंद हो जाए।


मेरा मुद्दा एक मॉडल से उत्पन्न होता है जो एक पृष्ठ पर कई मोडल होने पर एक और मोडल में खोला जा रहा है। एक पकड़ यह है कि डिपोम में पृष्ठ लोड पर डिपोल्स मौजूद हैं जबकि प्राथमिक मोड को तत्काल चालू किया जा रहा है (उपनिवेश उत्पन्न करने के लिए अलग-अलग कोड का उपयोग करते हैं जबकि प्राथमिक लोग jQuery UI संवाद का उपयोग करते हैं)।

यदि आप एक मोडल खोलते हैं और फिर सबमिडल खोलें तो सब ठीक है। यदि आप दूसरा मोडल खोलते हैं तो इसे बंद करें जब आप उस पहले मोडल को फिर से खोलें तो submodal दिखाई नहीं देगा क्योंकि यह दूसरे मोडल के नीचे छिपा हुआ है। अगर मैं इन सबोडोडल्स को शरीर में जोड़ता हूं, इस प्रकार उन्हें किसी भी जेनरेट किए गए मोडल के बाद डाल दिया जाता है तो वे ठीक दिखाई देते हैं (लेकिन इससे अन्य समस्याएं उत्पन्न होती हैं)। ऐसा लगता है कि यह एक जेड-इंडेक्स समस्या प्रतीत नहीं होता है (मैंने किसी भी भाग्य से संबंधित सब कुछ करने की कोशिश नहीं की है), ऐसा लगता है कि इन मॉडलों को डीओएम में कहाँ रखा गया है।

कोड साफ हो सकता है:

यह एचटीएमएल पृष्ठ लोड पर कैसा दिखता है:

<div id='submodal_1' class='submodal'>foo</div> 
<div id='submodal_2' class='submodal'>bar</div> 
</body> 

आप पहली बार प्राथमिक मोडल विंडो खोलने के लिए क्लिक करने के बाद:

<div id='submodal_1'>subfoo</div> 
<div id='submodal_2'>subbar</div> 
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div> 
</body> 

के बाद आप उस मोडल के सबमिडल को खोलने के लिए क्लिक करते हैं, मुझे प्रोडोडल को प्राथमिक मोडल से नीचे ले जाना है अन्यथा यह दिखाई नहीं देगा (और फिर, जेड-इंडेक्स इस अवरोध को प्रभावित नहीं करता है):

$('#submodal_1').insertAfter('#primary_modal_1'); 

इस बिंदु पर यदि आप #primary_modal_1 को बंद करते हैं तो यह छिपा होगा लेकिन फिर भी डोम में होगा। इस बिंदु पर

<div id='submodal_2' class='submodal'>subbar</div> 
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div> 
<div id='submodal_1' class='submodal'>subfoo</div> 
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div> 
</body> 

अगर आप पहले प्राथमिक मोडल फिर से खोलना और उसके submodal submodal दिखाई नहीं देगा खोलने का प्रयास करें: यदि आप दूसरी खोलते हैं कोड अब की तरह दिखाई देगा। लेकिन यदि आप submodal के लिए कदम है कि पिछले प्राथमिक मोडल नीचे है, इसलिए जैसे:

<div id='submodal_2' class='submodal'>subbar</div> 
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div> 
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div> 
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line 
</body> 

submodal सही ढंग से दिखाई देगी। मैं यह सुनिश्चित करना चाहता हूं कि डिपोमल्स हमेशा डीओएम में रहें, भले ही कितने प्राथमिक मॉडल जोड़े गए हों।

उत्तर

6

मिलान किए गए तत्वों के सेट में प्रत्येक तत्व के अंत में, JQuery "पैरामीटर द्वारा निर्दिष्ट सामग्री डालें" की संलग्न विधि।

$('body').append(...); 

प्रत्येक बार जब गतिशील रूप से कुछ जोड़ा जाता है तो आपको तत्व को स्थानांतरित करना होगा।

चेक इस JSFiddle: http://jsfiddle.net/eZ2Dq/

+0

यह उन तत्वों के लिए ठीक काम करता है जो पहले ही डोम में हैं लेकिन गतिशील रूप से जोड़े गए नहीं हैं। जब वे बनाए जाते हैं तो गतिशील रूप से जोड़े गए मोड डोम में अंतिम होंगे। – Stuart

+0

मैं एक JSFiddle पर काम कर रहा हूं ... – FMaz008

+0

हो गया, आप एक पीओसी के लिए JSfiddle की जांच कर सकते हैं :) – FMaz008

1

आप कर सकते थे हमेशा clone तत्व, append<body> टैग के अंत करने के लिए क्लोन, तो remove मूल तत्व।


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

$('.submodal').appendTo('body'); 

जो (यह मानते हुए मैं सही ढंग से समझ में एपीआई है) चाहिए submodal सभी तत्वों का शफ़ल (द्वारा की पहचान submodal कक्षा) <body> टैग के अंत तक।

+0

क्लोनिंग की आवश्यकता नहीं है। किसी तत्व को जोड़ते समय, इसे पिछली स्थिति से हटा दिया जाता है। –

+0

@RobW जानना अच्छा है, धन्यवाद। मैं यह नहीं कह सकता कि मुझे कभी भी ऐसे तत्व को जोड़ने की आवश्यकता है जो पहले से मौजूद है, इसलिए ऐसा कुछ नहीं है जिसे मैंने वास्तव में देखा है। –