AJAX प्रतिक्रिया को div

Question

को असाइन करने की आवश्यकता है, मैं एक अजाक्स कॉल का उपयोग करके एक छवि गैलरी को कार्यान्वित कर रहा हूं।

कॉल एक मान पास करता है और एक प्रतिक्रिया के रूप में एक HTML कोड प्राप्त करता है। मैंने इस प्रतिक्रिया की जांच की और यह सही है।

और यदि मैं इस कोड को स्थिर डीवी में डालता हूं, तो गैलरी कोई समस्या नहीं होती है।

लेकिन अगर मैं AJAX के साथ कोड इंजेक्ट करता हूं, जब मैं किसी छवि पर क्लिक करता हूं, तो यह विंडो में सामान्य छवि के रूप में खुलता है: गैलरी पॉप-अप काम नहीं कर रहा है।

इस समस्या का कारण क्या हो सकता है?

कोड के रूप में इस प्रकार है

$.ajax({ 
 

 
    type: 'GET', 
 
    url: 'www.test.com', 
 
    data: { 
 
     type: product, 
 
     use: 'gallery' 
 
    }, 
 
    dataType: 'html', 
 
    success: function(data) { 
 
     $("#dv_gallery").append(data); 
 
    } 
 

 
});

निम्नलिखित पृष्ठ में HTML कोड है

<div class="portfolio-adaptive adaptive-three" id="dv_gallery"></div>

Answer 1

जब तक गैलरी (जिसे आप निर्दिष्ट नहीं करते हैं) पूरी तरह से सीएसएस आधारित है, आपको लगभग निश्चित रूप से कुछ प्रकार के प्रारंभिक कोड को कॉल करने की आवश्यकता है।

आम तौर पर इस गैलरी कोड द्वारा ध्यान रखा जाता है जब यह लोड करता है:

// This "animates" all gallery DIVs **THAT EXIST NOW** 
<script src="gallery.js"></script> 

चेक गैलरी एपीआई। एक चयनकर्ता को gallerize करने के लिए कहें $.gallery() पर कॉल करें। तो फिर तुम() .click के आधार पर एक कस्टम गैलरी

इस मामले तुम सिर्फ प्रतिनिधिमंडल के माध्यम से (माना) एक टैग पर क्लिक अवरोधन करने की जरूरत के साथ

success: function(data) { 

    $("#dv_gallery").append(data); 

    // The $('#dv_gallery') below includes also the newly appended data 
    $("#dv_gallery") 
     .not(".already-initialized") 
     .addClass("already-initialized") 
     .gallery(); 
} 

उदाहरण पढ़ने के लिए अपने कोड बदल जाते हैं। इस परिकल्पना में आप अब

$('#dv_gallery a').on('click', function(event) { 
    ... 
}); 

और यह उन ए के लिए काम करता है जो स्थिर रूप से मौजूद हैं। यह काम के साथ गतिशील एक टैग जोड़ बनाने के लिए, आपको क्या करना चाहिए

$('#dv_gallery').on('click', 'a', function(event) { 
    ... 
}); 

सूचना है कि अब यदि आपके पास बाध्य #dv_gallery लिए क्लिक करें घटना, जो मौजूद है, और एक प्रतिनिधि के रूप में कार्य करने के लिए कह के लिए हाल में 'एक जोड़ा .on() को अतिरिक्त पैरामीटर की आपूर्ति करके टैग।FancyBox साथ

उदाहरण:

// Select gallery container 
$("#dv_gallery") 
    // Images are embedded in A tags in Fancybox 
    .find('a') 
    // But we do not want to fancybox already gallerified images 
    .not(".already-initialized") 
    // And we want to mark as gallerified those we process now 
    .addClass("already-initialized") 
    // Everything is ready -- build these new A's into fancyboxes 
    .fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 

तो एपीआई काफी बुद्धिमान नहीं पहले से समृद्ध तत्व फिर से gallerify के लिए है, तो आप सेमाफोर वर्गों को जोड़ने की जरूरत नहीं है, लेकिन बस

$("#dv_gallery").append(data); 
$("#dv_gallery").gallery(); 

कर सकते हैं

या अगर यह नहीं है, लेकिन आप जानते हैं कि यह किसी वर्ग कहते हैं, आप सीधे उपयोग कर सकते हैं एक सेमाफोर के रूप में है कि एक:

$("#dv_gallery") 
     .not(".gallery-class") 
     .gallery(); 

लौटा एचटीएमएल

jQuery के साथ स्पष्ट रूप से स्पष्ट समस्याओं का निदान करना jQuery को सही ढंग से संलग्न करना चाहिए; अगर ऐसा नहीं होता, लौट आए दस्तावेज़ के सामग्री प्रकार की जाँच करें, और

$("#dv_gallery").append($(data)); 

के साथ प्रयास करें या सभी गैलरी की सामग्री की जगह का प्रयास करें:

$("#dv_gallery").html(data); 

दोनों ही मामलों आप की आवश्यकता होगी में किसी भी आवश्यक गैलरी प्रारंभिक कोड reinvoke करने के लिए। ये अंतिम दो विकल्प केवल नैदानिक ​​हैं, हालांकि - यदि वे काम करते हैं, तो यह आपको बताता है कि लौटे ऑब्जेक्ट में कुछ ख़राब है।

Answer 2

क्या आपने jquery के html() फ़ंक्शन का उपयोग करने का प्रयास किया है?

$("#dv_gallery").html(data); 

Answer 3

$("#dv_gallery").html(data);
कोड से ऊपर के लिए आप

Answer 4

समस्या काम कर रहा है कि सबसे अधिक संभावना है, हालांकि अपने कोड click कोड प्रदर्शित नहीं करता है, यह पहचाना जा रहा नहीं कर रहा है, क्योंकि यह इस तथ्य के बाद लोड कर रहा है। गैलरी कोड के साथ कुछ भी नहीं करना है।

बस रखें, अपना क्लिक कोड बदलकर देखें।

$('.myClass').on('click', function(){ ... }) 

करने के लिए

$('body').on('click', '.myClass', function(){ ... }) 

इस रूट किया जाएगा शरीर के माध्यम से क्लिक करें और फिर अपने गैलरी कोड सक्रिय होना चाहिए।