कैसे गतिशील सामग्री

Question

के लिए चहचहाना बूटस्ट्रैप पॉपओवर उपयोग करने के लिए मैं पॉपओवर

पर गूगल मानचित्र दिखाना चाहते हैं लेकिन पॉपओवर नक्शा बदलने के लिए विफल रहता है

केवल काम करता है जब नक्शा ठीक हो गई है

मेरे कोड:

$(function(){ 

// getmap function from http://stackoverflow.com/questions/10545768/google-map-in-twitter-bootstrap-popver 
var getMap = function(opts) { 
    var src = "http://maps.googleapis.com/maps/api/staticmap?", 
    params = $.extend({ 
    center: 'New York, NY', 
    zoom: 14, 
    size: '512x512', 
    maptype: 'roadmap', 
    sensor: false 
    }, opts), 
    query = []; 

    $.each(params, function(k, v) { 
query.push(k + '=' + encodeURIComponent(v)); 
    }); 

    src += query.join('&'); 
    return '<img src="' + src + '" />'; 
} 



$('.map').click(function(){ 
    location = $(this).text(); 
    $("#map").html(getMap({center: location})); 
    }); 


$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){ 
    return $("#map").html(); 
    }});  

    }); 

इस समारोह के साथ मेरी समस्या:

$('.map').click(function(){...}); 

लिंक (.map) क्योंकि #map बदल गया है पर क्लिक करें के साथ, पॉपओवर टूट गया है और काम नहीं करता है

आप

Answer 1

धन्यवाद मुझे नहीं लगता कि आप दो अलग-अलग में यह क्या करना चाहिए चरण (फिर पॉपओवर पर क्लिक करें), न ही आपको div की आवश्यकता होती है जब तक कि आपके लिए कोई कारण न हो। यह मेरे लिए काम करता है:

जावास्क्रिप्ट:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){ 
    return getMap({center: $(this).text()}) 
    }});  
}); 

तब आप अपने getMap पैरामीटर से center: 'New York, NY', लाइन निकाल सकते हैं।

HTML:

<a href="#" class="map">New York, NY</a> 

आप #map div का उपयोग कर रहे थे पॉपओवर बड़ा बनाने के लिए, बस के बजाय पॉपओवर की सीएसएस बदलने के लिए, की तरह कुछ कर रही द्वारा:

.popover { width: 512px; height: 512px; } 

मैं करूंगा इसके लिए एक और विशिष्ट चयनकर्ता का उपयोग करने की अनुशंसा करते हैं, अन्यथा यह आपकी साइट पर कहीं और पॉपओवर को प्रभावित करेगा।