javascript - Twitter Bootstrap Popover 和 AJAX

Question

我一直在浏览 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 响应添加到弹出窗口内容？我试过“返回”但没有用。

有什么干净的解决方案吗？

Answer 1

是的。有可能的。它一直是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)了一个新的悬停事件。如果您希望在每次悬停事件时刷新数据，您应该稍微修改一下。