twitter-bootstrap 如何使用 twitter bootstrap popover 获取动态内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15437332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use twitter bootstrap popover for dynamic content
提问by ali smith
I want to show google map on popover
我想在 popover 上显示谷歌地图
But the popover fails to change map
但是弹出框无法更改地图
Only works when the map is fixed
仅在地图固定时有效
My code :
我的代码：
$(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();
}});
});
My problem with this function :
我对这个功能的问题：
$('.map').click(function(){...});
With Click on the link(.map) because the #map is changed, the popover is broken and does not work
由于 #map 已更改，因此单击链接（.map），弹出窗口已损坏且不起作用
Thank you
谢谢
回答by frostyterrier
I don't think you need to do it in two separate steps (click then popover), nor do you need the div unless there's some reason for that which you haven't mentioned. This works for me:
我认为您不需要分两个单独的步骤（单击然后弹出），也不需要 div，除非有一些您没有提到的原因。这对我有用：
JavaScript:
JavaScript：
$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
return getMap({center: $(this).text()})
}});
});
You can then remove the center: 'New York, NY',line from your getMap params.
然后，您可以center: 'New York, NY',从 getMap 参数中删除该行。
HTML:
HTML：
<a href="#" class="map">New York, NY</a>
If you were using the #map div to make the popover larger, just change the CSS of the popover instead, by doing something like:
如果您使用 #map div 使弹出框更大，只需更改弹出框的 CSS，执行以下操作：
.popover { width: 512px; height: 512px; }
I would recommend using a more specific selector for that though, otherwise it will affect popovers elsewhere on your site.
不过，我建议为此使用更具体的选择器，否则它会影响您网站上其他地方的弹出窗口。
