Twitter Bootstrap Popover和AJAX

Ale*_*dre 4 javascript asp.net ajax popover twitter-bootstrap

我一直在浏览如何在bootstrap popover上加载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'
});
Run Code Online (Sandbox Code Playgroud)

如何在弹出窗口内容中添加ajax响应?我试过"返回"并且不起作用.

有清洁的解决方案

Pra*_*man 10

是.有可能的.它已经得到了回答.

使用data-属性可以提供URL,如下所示:

<a href="#" title="blabla" data-ajaxload="/test.php">blabla</a>
Run Code Online (Sandbox Code Playgroud)

现在处理程序:

$('*[data-ajaxload]').bind('hover',function(){
  var e=$(this);
  e.unbind('hover');
  $.get(e.data('ajaxload'),function(d){
      e.popover({content: d}).popover('show');
  });
});
Run Code Online (Sandbox Code Playgroud)

unbind('hover')防止多次加载数据,popover()绑定一个新的悬停事件.如果您希望在每个悬停事件中刷新数据,您应该稍微修改一下.