दिलचस्प पोस्ट
संपत्ति निर्देशिका से ऑडियो फ़ाइल चलाएं कोई शब्द नहीं है जिसमें एक शब्द का मिलान करने के लिए नियमित अभिव्यक्ति है? कस्टम विशेषताओं – हाँ या ना? घुंघराले ब्रेसिज़ को छोड़ने के लिए इसे खराब अभ्यास क्यों माना जाता है? जावा प्रकार अनुमान: संदर्भ जावा 8 में अस्पष्ट है, लेकिन जावा 7 नहीं है जीसीसी सी + + लिंकर त्रुटियां: 'XXX के लिए वीटेबल' के लिए अनिर्धारित संदर्भ, 'क्लासनाम :: क्लासैनम ()' के लिए अनिर्धारित संदर्भ कोको उद्देश्य-सी वर्ग के काम में एक चर के सामने एक अंडरस्कोर कैसे होता है? URL से क्वेरी स्ट्रिंग निकालें विंडोज फॉर्म में किसी अन्य फॉर्म पर नियंत्रण का उपयोग करने का सर्वोत्तम तरीका है? स्ट्रिंग स्थिरांक से 'चार *' के लिए सी ++ नापसंद रूपांतरण डफ के उपकरण कैसे काम करता है? स्क्रिप्ट चलते समय मुख्य () फ़ंक्शन नहीं चलते जावास्क्रिप्ट में दिनांक अंतर की गणना करने का सबसे अच्छा तरीका क्या है सी ++ एसटीएल किसी भी "पेड़" कंटेनर क्यों नहीं प्रदान करता है? आईओएस 5 के साथ पीछे की तरफ से संगत रहते हुए आईओएस 6 में ऑटो लेआउट को सक्षम करना

कैसे गतिशील जोड़ा तत्व के लिए fancybox बाध्य करने के लिए?

मैं पॉप प्रपत्र के रूप में jQuery के फैंसीबॉक्स 1.3.4 का इस्तेमाल करता हूं।

लेकिन मुझे लगता है कि fancybox तत्व गतिशील जोड़ा नहीं जोड़ सकते हैं। उदाहरण के लिए जब मैं वर्तमान दस्तावेज़ में एक html तत्व जोड़ता हूं।

इस तरह: पहले मैं शरीर का उपयोग jquery के लिए एक तत्व संलग्न,

$(document.body).append("<a href="home/index" class="fancybox"/>"); 

और मैं fancybox कॉल,

  $(".ajaxFancyBox").fancybox({padding: 0}); 

लेकिन गतिशील जोड़ा तत्व के साथ fancybox काम नहीं करता है

और मैं इस तत्व से Fancybox को नहीं बुला सकता है?

मै चाइना से आया हूँ। तो मेरी अंग्रेजी खराब है, कृपया मुझे क्षमा करें

वेब के समाधान से एकत्रित समाधान "कैसे गतिशील जोड़ा तत्व के लिए fancybox बाध्य करने के लिए?"

गतिशील रूप से जोड़ा तत्वों के लिए fancybox (v1.3.x) को बाध्य करने का सबसे आसान तरीका यह है:

1: jQuery v1.7.x पर अपग्रेड करें (यदि आपने अभी तक नहीं किया है)

2: on() + focusin ईवेंट on() jQuery API का उपयोग करके अपनी स्क्रिप्ट सेट करें

इसे काम करने के लिए आपको अपने तत्वों के parent तत्व को class="ajaxFancyBox" साथ ऊपर (या parent के parent रूप में आपको इसकी ज़रूरत है) के अनुसार class="ajaxFancyBox" होगा और इसके लिए jQuery on() संलग्न करना होगा, उदाहरण के लिए, यह एचटीएमएल:

 <div id="container"> <a class="ajaxFancyBox" href="image01.jpg">open image 01</a> <a class="ajaxFancyBox" href="image02.jpg">open image 02</a> </div> 

.. हम focusin id="container" ( parent ) के साथ तत्व के लिए on() और focusin ईवेंट on() लागू होंगे, जैसा कि ऊपर दिए गए उदाहरण के अनुसार:

 $("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on 

आप की जरूरत के रूप में आप किसी भी fancybox विकल्प लागू कर सकते हैं इसके अतिरिक्त आपके पास विभिन्न प्रकार की सामग्री के लिए अलग-अलग स्क्रिप्ट हो सकती है ( on() विधि के अंदर) जैसे:

 $("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox $("a.iframeFancyBox").fancybox({ // fancybox API options here 'padding': 0, 'width': 640, 'height': 320, 'type': 'iframe' }); // fancybox }); // on 

महत्वपूर्ण : उपर्युक्त उदाहरण क्रोम पर ऐसा काम नहीं करेगा। वर्कअराउंड आपके सभी तत्वों को tabindex एट्रिब्यूट जोड़ना है जैसे कि tabindex से जुड़ा हुआ है

 <div id="container"> <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a> <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a> </div> 

जो इस मुद्दे को हल करता है और IE7 + सहित अधिकांश ब्राउज़रों में काम करेगा (जहाँ तक मुझे पता है)

मेरे डेमो पेज यहां देखें

अद्यतन: मार्च 07, 2012

मुझे बताया गया था कि जब आप पृष्ठ की सामग्री को बदलते हैं, तो आप इस विधि को केवल पेज पर नई सामग्री जोड़ते ही काम करते हैं।

यह विधि वास्तव में उपर्युक्त दो परिस्थितियों में से किसी पर काम करती है बस सुनिश्चित करें कि नई जगह की सामग्री कंटेनर के अंदर भी लोड की गई है जहां आपने .on() विधि लागू की है।

डेमो देखें

क्रोम के लिए tabindex समाधान भी लागू होता है।

आप ऐसा कुछ करने की कोशिश कर सकते हैं:

  $(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>"); 

और फिर Fancybox को बनाने और दिखाने के लिए एक फ़ंक्शन बनाएं:

 function showFancybox(){ $.fancybox( '<h2>Hi!</h2><p>Content of popup</p>', { 'autoDimensions' : false, 'width' : 350, 'height' : 'auto', 'transitionIn' : 'none', 'transitionOut' : 'none' } ); } 

आप गलत वर्ग नाम निर्दिष्ट कर रहे हैं, इसके बजाय इसे आज़माएं:

 $(".fancybox").fancybox({padding: 0}); 

जैसा कि ऊपर टिप्पणी में बताया गया है, हम इस तरह की समस्याओं (गतिशील तत्वों के लिए बंधन तत्व) में निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं –

 $("#container").on("focusin", function(){ if($(this).hasClass("fancybox-bind")){ //check if custom class exist return 0; //now fancybox event will not be binded }else{ //add class to container $(this).addClass("fancybox-bind"); } $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox $("a.iframeFancyBox").fancybox({ // fancybox API options here 'padding': 0, 'width': 640, 'height': 320, 'type': 'iframe' }); // fancybox }); // on 

मैंने इस प्रश्न का उत्तर उसी तरह दिया, जिस पर आपको जवाब मिल सकता है

गतिशील रूप से जेनरेट किए गए HTML को jQuery का उपयोग करना Fancybox के साथ अच्छी तरह से नहीं खेलता है