我一直在浏览 SO 以寻找有关如何在 Bootstrap 弹出窗口上加载 ajax 内容的解决方案,但找不到任何合适的解决方案。
这是我目前所拥有的:
$(".btnCharge").click(function () {
$("#boxPayment").fadeIn();
})
.popover({
title: 'Advantages',
html: 'true',
content: function () {
$.ajax({
type: "POST",
url: "Index.aspx/FindAdvantagesByCCID",
data: '{"id": "' + 1 + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var json = jQuery.parseJSON(data.d);
var html = '';
$.each(json, function (i, item) {
html = html + '<a href="#"><i class="icon-ok"></i>' + item.Advantage + '</a><br />';
});
}
});
},
placement: 'bottom',
trigger: 'hover'
});
如何将 ajax 响应添加到弹出窗口内容?我试过“返回”但没有用。
有什么干净的解决方案吗?
最佳答案
是的。有可能的。它一直是answered已经。
使用 data-
属性,您可以提供 URL,如下所示:
<a href="#" title="blabla" data-ajaxload="/test.php">blabla</a>
现在处理程序:
$('*[data-ajaxload]').bind('hover',function(){
var e=$(this);
e.unbind('hover');
$.get(e.data('ajaxload'),function(d){
e.popover({content: d}).popover('show');
});
});
unbind('hover')
防止多次加载数据并且 popover() 绑定(bind)了一个新的悬停事件。如果您希望在每次悬停事件时刷新数据,您应该稍微修改一下。
关于javascript - Twitter Bootstrap Popover 和 AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14736604/