使用AJAX加载Bootstrap弹出内容.这可能吗? [英] Load a Bootstrap popover content with AJAX. Is this possible?

问题描述

我尝试过的适当位置在这里:

The appropriate bits of what I tried are here:

<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>

$(".button").popover({html: true})

$(".button").click(function(){
    $(this).popover('show');
    $("#my_popover").load('my_stuff')
})

单击时，我看到请求已发出，但没有填充弹出窗口.我什至看不到将弹出式窗口的HTML添加到DOM中，但这可能是萤火虫.

When I click, I see the request get made, but doesn't populate the popover. I don't even see HTML for the popover get added to the DOM, but that could be firebug.

有人尝试过吗?

推荐答案

有关有效的解决方案，请参见我的博客文章:

See my blog post for the working solution: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

首先，我们应该向您要添加的元素添加data-poload属性 喜欢添加一个弹出.此属性的内容应为 要加载的网址(绝对或相对):

First we should add a data-poload attribute to the elements you would like to add a pop over to. The content of this attribute should be the url to be loaded (absolute or relative):

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

在JavaScript中，最好在$(document).ready();

And in JavaScript, preferably in a $(document).ready();

$('*[data-poload]').hover(function() {
    var e=$(this);
    e.off('hover');
    $.get(e.data('poload'),function(d) {
        e.popover({content: d}).popover('show');
    });
});

off('hover')防止多次加载数据，并且popover()绑定 一个新的悬停事件.如果要在每次悬停时刷新数据 事件，则应删除此关闭项.

off('hover') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should remove the off.

请参见示例的有效 JSFiddle .

这篇关于使用AJAX加载Bootstrap弹出内容.这可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！