使用AJAX加载Bootstrap弹出内容。这可能吗？

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

<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中，但这可能是萤火虫。

有人尝试过吗？

有关有效的解决方案，请参见我的博客文章：https : //medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

首先，我们应该向要添加弹出框的元素添加data-poload属性。此属性的内容应为要加载的网址（绝对或相对）：

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

而在JavaScript中，最好在$（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()绑定新的悬停事件。如果要在每次悬停事件时刷新数据，则应删除此关闭项。

请参阅示例的工作JSFiddle。

为我工作正常：

$('a.popup-ajax').popover({
    "html": true,
    "content": function(){
        var div_id =  "tmp-id-" + $.now();
        return details_in_popup($(this).attr('href'), div_id);
    }
});

function details_in_popup(link, div_id){
    $.ajax({
        url: link,
        success: function(response){
            $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

阅读了所有这些解决方案后，我认为如果使用同步ajax调用，该解决方案将变得更加简单。然后，您可以使用类似：

  $('#signin').popover({
    html: true,
    trigger: 'manual',
    content: function() {
      return $.ajax({url: '/path/to/content',
                     dataType: 'html',
                     async: false}).responseText;
    }
  }).click(function(e) {
    $(this).popover('toggle');
  });

我已经更新了最受欢迎的答案。但是，如果我的更改无法获得批准，请在此处单独回答。

不同之处在于：

• 正在加载内容时显示的正在加载文本。非常适合慢速连接。
• 消除了在鼠标第一次离开弹出窗口时发生的闪烁。

首先，我们应该向要添加弹出框的元素添加data-poload属性。此属性的内容应为要加载的网址（绝对或相对）：

<a href="#" data-poload="/test.php">HOVER ME</a>

而在JavaScript中，最好在$（document）.ready（）;中；

 // On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(
    function (event) {
        var el = $(this);

        // disable this event after first binding 
        el.off(event);

        // add initial popovers with LOADING text
        el.popover({
            content: "loading…", // maybe some loading animation like <img src='loading.gif />
            html: true,
            placement: "auto",
            container: 'body',
            trigger: 'hover'
        });

        // show this LOADING popover
        el.popover('show');

        // requesting data from unsing url from data-poload attribute
        $.get(el.data('poload'), function (d) {
            // set new content to popover
            el.data('bs.popover').options.content = d;

            // reshow popover with new content
            el.popover('show');
        });
    },
    // Without this handler popover flashes on first mouseout
    function() { }
);

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

请参阅示例的工作JSFiddle。

ÇağatayGürtürk的代码的变体，您可以改用委托函数，并在悬停时强制隐藏弹出窗口。

$('body').delegate('.withajaxpopover','hover',function(event){
    if (event.type === 'mouseenter') {
        var el=$(this);
        $.get(el.attr('data-load'),function(d){
            el.unbind('hover').popover({content: d}).popover('show');
        });
    }  else {
        $(this).popover('hide');
    }
});

ÇağatayGürtürk的解决方案很好，但我也遇到了Luke The Obscure所描述的怪异现象：

当ajax加载持续过多（或鼠标事件过快）时，给定元素上将出现.popover（'show'）且没有.popover（'hide'），导致弹出窗口保持打开状态。

我更喜欢这种大规模的预加载解决方案，所有的popover内容均已加载，并且事件由引导程序处理，就像在正常（静态）popover中一样。

$('.popover-ajax').each(function(index){

    var el=$(this);

    $.get(el.attr('data-load'),function(d){
        el.popover({content: d});       
    });     

});

在2015年，这是最好的答案

$('.popup-ajax').mouseenter(function() {
   var i = this
   $.ajax({
      url: $(this).attr('data-link'), 
      dataType: "html", 
      cache:true, 
      success: function( data{
         $(i).popover({
            html:true,
            placement:'left',
            title:$(i).html(),
            content:data
         }).popover('show')
      }
   })
});

$('.popup-ajax').mouseout(function() {
  $('.popover:visible').popover('destroy')
});

另一个解决方案：

$target.find('.myPopOver').mouseenter(function()
{
    if($(this).data('popover') == null)
    {
        $(this).popover({
            animation: false,
            placement: 'right',
            trigger: 'manual',
            title: 'My Dynamic PopOver',
            html : true,
            template: $('#popoverTemplate').clone().attr('id','').html()
        });
    }
    $(this).popover('show');
    $.ajax({
        type: HTTP_GET,
        url: "/myURL"

        success: function(data)
        {
            //Clean the popover previous content
            $('.popover.in .popover-inner').empty();    

            //Fill in content with new AJAX data
            $('.popover.in .popover-inner').html(data);

        }
    });

});

$target.find('.myPopOver').mouseleave(function()
{
    $(this).popover('hide');
});

这里的想法是要手动触发酥料饼的显示器的mouseenter和鼠标离开事件。

上了mouseenter，如果没有您的项目创建酥料饼（如果（$（本）。数据（“酥料饼”）== NULL） ），创建它。有趣的是，可以通过将其作为参数（模板）传递给popover（）函数来定义自己的PopOver内容。不要忘记也将html参数设置为true。

在这里，我只是创建了一个名为popovertemplate的隐藏模板，并使用JQuery对其进行了克隆。克隆后不要忘记删除id属性，否则最终将在DOM中出现重复的id。还要注意，style =“ display：none”将模板隐藏在页面中。

<div id="popoverTemplateContainer" style="display: none">

    <div id="popoverTemplate">
        <div class="popover" >
            <div class="arrow"></div>
            <div class="popover-inner">
                //Custom data here
            </div>
        </div>
    </div>
</div>

创建步骤之后（或者如果已经创建），只需使用$（this）.popover（'show'）;显示popOver。

然后经典的Ajax调用。成功后，您需要清除旧的Popover内容，然后再从服务器放入新的新数据。我们如何获得当前的弹出窗口内容？使用.popover.in选择器！的。在类指示酥料饼的当前显示，这是这里的伎俩！

最后，在mouseleave事件上，只需隐藏弹出窗口即可。

这是我的解决方案，它也适用于ajax加载的内容。

/*
 * popover handler assigned document (or 'body') 
 * triggered on hover, show content from data-content or 
 * ajax loaded from url by using data-remotecontent attribute
 */
$(document).popover({
    selector: 'a.preview',
    placement: get_popover_placement,
    content: get_popover_content,
    html: true,
    trigger: 'hover'
});

function get_popover_content() {
    if ($(this).attr('data-remotecontent')) {
        // using remote content, url in $(this).attr('data-remotecontent')
        $(this).addClass("loading");
        var content = $.ajax({
            url: $(this).attr('data-remotecontent'),
            type: "GET",
            data: $(this).serialize(),
            dataType: "html",
            async: false,
            success: function() {
                // just get the response
            },
            error: function() {
                // nothing
            }
        }).responseText;
        var container = $(this).attr('data-rel');
        $(this).removeClass("loading");
        if (typeof container !== 'undefined') {
            // show a specific element such as "#mydetails"
            return $(content).find(container);
        }
        // show the whole page
        return content;
    }
    // show standard popover content
    return $(this).attr('data-content');
}

function get_popover_placement(pop, el) {
    if ($(el).attr('data-placement')) {
        return $(el).attr('data-placement');
    }
    // find out the best placement
    // ... cut ...
    return 'left';
}

如果弹出窗口中的内容不太可能更改，则仅将其检索一次是有意义的。此外，这里的某些解决方案还存在以下问题：如果快速移过多个“预览”，则会出现多个打开的弹出窗口。该解决方案解决了这两个问题。

$('body').on('mouseover', '.preview', function() 
{
    var e = $(this);
    if (e.data('title') == undefined)
    {
        // set the title, so we don't get here again.
        e.data('title', e.text());

        // set a loader image, so the user knows we're doing something
        e.data('content', '<img src="/images/ajax-loader.gif" />');
        e.popover({ html : true, trigger : 'hover'}).popover('show');

        // retrieve the real content for this popover, from location set in data-href
        $.get(e.data('href'), function(response)
        {
            // set the ajax-content as content for the popover
            e.data('content', response.html);

            // replace the popover
            e.popover('destroy').popover({ html : true, trigger : 'hover'});

            // check that we're still hovering over the preview, and if so show the popover
            if (e.is(':hover'))
            {
                e.popover('show');
            }
        });
    }
});

我认为我的解决方案使用默认功能更为简单。

http://jsfiddle.net/salt/wbpb0zoy/1/

$("a.popover-ajax").each(function(){
		 $(this).popover({
			trigger:"focus",
			placement: function (context, source) {
                  var obj = $(source);
				  $.get(obj.data("url"),function(d) {
                        $(context).html( d.titles[0].title)
                  });	
			},
			html:true,
			content:"loading"
		 });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>


<ul class="list-group">
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Cras justo odio</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Dapibus ac facilisis in</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Morbi leo risus</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Porta ac consectetur ac</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Vestibulum at eros</a></li>
</ul>

我尝试了ÇağatayGürtürk的解决方案，但得到了与默默无闻的卢克一样的怪异感。然后尝试Asa Kusuma的解决方案。这行得通，但我相信Ajax会阅读所有弹出窗口显示时。对unbind（'hover'）的调用无效。这是因为委托正在监视特定类中的事件-但是该类未更改。

这是我的解决方案，紧密基于Asa Kusuma的解决方案。变化：

• 更换delegate与on匹配新的jQuery库。
• 删除“ withajaxpopover”类，而不是取消绑定悬停事件（从未绑定）
• 在弹出窗口中添加“触发：悬停”，以便Bootstrap从第二次使用开始就完全处理它。
• 我的数据加载函数返回JSon，这使得为弹出窗口指定标题和内容变得容易。

    / *目标：显示工具提示/弹出框，从中获取内容
              仅在第一次应用。

        方法：第一次获取适当的内容并注册工具提示/弹出窗口 
              鼠标将输入一个类为“ withajaxpopover”的DOM元素。除掉
              元素中的类，因此下次鼠标进入时我们不这样做。
              但是，这并不是第一次显示工具提示/弹出窗口
              （因为注册工具提示时已经输入了鼠标）。
              因此，我们必须自己显示/隐藏它。
    * /
    $（function（）{
      $（'body'）。on（'hover'，'.withajaxpopover'，function（event）{
          如果（event.type ==='mouseenter'）{
              var el = $（this）;
              $ .get（el.attr（'data-load'），function（d）{
                  el.removeClass（'withajaxpopover'）
                  el.popover（{trigger：'hover'， 
                              标题：d.title， 
                              内容：d.content}）。popover（'show'）;
              }）;
          }其他{
              $（this）.popover（'hide'）;
          }
      }）;
    }）;

我在这里尝试了一些建议，我想介绍一下我的建议（有点不同）-希望它会对某人有所帮助。我想在第一次单击时显示弹出窗口，然后在第二次单击时隐藏它（当然每次都更新数据）。我使用了一个额外的变量visable来了解弹出窗口是否可见。这是我的代码：HTML：

<button type="button" id="votingTableButton" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" >Last Votes</button>

Javascript：

$('#votingTableButton').data("visible",false);

$('#votingTableButton').click(function() {  
if ($('#votingTableButton').data("visible")) {
    $('#votingTableButton').popover("hide");
    $('#votingTableButton').data("visible",false);          
}
else {
    $.get('votingTable.json', function(data) {
        var content = generateTableContent(data);
        $('#votingTableButton').popover('destroy');
        $('#votingTableButton').popover({title: 'Last Votes', 
                                content: content, 
                                trigger: 'manual',
                                html:true});
        $('#votingTableButton').popover("show");
        $('#votingTableButton').data("visible",true);   
    });
}   
});

干杯!

<button type="button" id="popover2" title="" data-content="<div id='my_popover' style='height:250px;width:300px;overflow:auto;'>Loading...Please Wait</div>" data-html="true" data-toggle="popover2" class="btn btn-primary" data-original-title="A Title">Tags</button>

$('#popover2').popover({ 
    html : true,
    title: null,
    trigger: "click",
    placement:"right"
});

$("#popover2").on('shown.bs.popover', function(){
    $('#my_popover').html("dynamic content loaded");

});

这是解决一些问题的一种方法：

1. 内容更新后出现对齐问题，尤其是在展示位置为“顶部”的情况下。关键是调用._popper.update()，它会重新计算弹出窗口的位置。
2. 内容更新后的宽度更改。它没有破坏任何东西，只是让用户感到不适。为了减轻这种情况，我将弹出窗口的宽度设置为100％（然后由设置上限max-width）。

var e = $("#whatever");
e.popover({
    placement: "top",
    trigger: "hover",
    title: "Test Popover",
    content: "<span class='content'>Loading...</span>",
    html: true
}).on("inserted.bs.popover", function() {
    var popover = e.data('bs.popover');
    var tip = $(popover.tip);
    tip.css("width", "100%");
    $.ajax("/whatever")
        .done(function(data) {
            tip.find(".content").text(data);
            popover._popper.update();
        }).fail(function() {
            tip.find(".content").text("Sorry, something went wrong");
        });
});

这里有太多答案，但我也都找不到我想要的答案。我已经将Ivan Klass的答案扩展为既适用于Bootstrap 4又具有智能缓存功能。

请注意，由于Stackoverflow的CORS策略，该代码段实际上不会加载远程地址。

var popoverRemoteContents = function(element) {
  if ($(element).data('loaded') !== true) {
    var div_id = 'tmp-id-' + $.now();
    $.ajax({
      url: $(element).data('popover-remote'),
      success: function(response) {
        $('#' + div_id).html(response);
        $(element).attr("data-loaded", true);
        $(element).attr("data-content", response);
        return $(element).popover('update');
      }
    });
    return '<div id="' + div_id + '">Loading...</div>';
  } else {
    return $(element).data('content');
  }
};

$('[data-popover-remote]').popover({
  html: true,
  trigger: 'hover',
  content: function() {
    return popoverRemoteContents(this);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<span data-popover-remote="http://example.com/">Remote Popover test with caching</span>

这个线程给出了与之类似的答案：设置数据内容并显示弹出窗口-这是一种更好的方法，可以实现您希望实现的目标。否则，您将不得不在popover方法的选项中使用live：true选项。希望这会有所帮助

$("a[rel=popover]").each(function(){
        var thisPopover=$(this);
                var thisPopoverContent ='';
                if('you want a data inside an html div tag') {
                thisPopoverContent = $(thisPopover.attr('data-content-id')).html();
                }elseif('you want ajax content') {
                    $.get(thisPopover.attr('href'),function(e){
                        thisPopoverContent = e;
                    });
            }
        $(this).attr(   'data-original-title',$(this).attr('title') );
        thisPopover.popover({
            content: thisPopoverContent
        })
        .click(function(e) {
            e.preventDefault()
        });

    });

请注意，我使用了相同的href标记，并进行了更改，以使其在单击时不会更改页面，这对于SEO以及用户没有javascript都是一件好事！

我喜欢Çağatay的解决方案，但弹出菜单并没有隐藏在鼠标移开时。我为此添加了以下额外功能：

// hides the popup
$('*[data-poload]').bind('mouseout',function(){
   var e=$(this);
   e.popover('hide'); 
});

我使用原始解决方案，但进行了一些更改：

首先，我使用getJSON()而不是get()因为我正在加载json脚本。接下来，我添加了悬停的触发行为，以解决粘滞弹出问题。

$('*[data-poload]').on('mouseover',function() {
    var e=$(this);
    $.getJSON(e.data('poload'), function(data){
        var tip;
        $.each(data, function (index, value) {
           tip = this.tip;
           e.popover({content: tip, html: true, container: 'body', trigger: 'hover'}).popover('show');
        });
    });
});

我添加了html：true，因此，如果要格式化结果，它不会显示原始的html输出。您还可以添加更多控件。

    $('*[data-poload]').bind('click',function() {
        var e=$(this);
        e.unbind('click');
        $.get(e.data('poload'),function(d) {
            e.popover({content: d, html: true}).popover('show', {

            });
        });
    });

在带有悬停触发器的静态元素上显示ajax popover：

$('.hover-ajax').popover({
    "html": true,
    trigger: 'hover',
    "content": function(){
        var div_id =  "tmp-id-" + $.now();
        return details_in_popup($(this).attr('href'), div_id);
    }
});

function details_in_popup(link, div_id){
    $.ajax({
        url: link,
        success: function(response){
            $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

HTML：

<span class="hover-ajax" href="http://domain.tld/file.php"> Hey , hoover me ! </span>

  $('[data-poload]').popover({
    content: function(){
      var div_id =  "tmp-id-" + $.now();
      return details_in_popup($(this).data('poload'), div_id, $(this));
    },
    delay: 500,

    trigger: 'hover',
    html:true
  });

  function details_in_popup(link, div_id, el){
      $.ajax({
          url: link,
          cache:true,
          success: function(response){
              $('#'+div_id).html(response);
              el.data('bs.popover').options.content = response;
          }
      });
      return '<div id="'+ div_id +'"><i class="fa fa-spinner fa-spin"></i></div>';
  }   

Ajax内容被加载一次！看到el.data('bs.popover').options.content = response;

我做到了，它与ajax完美配合，并加载了popover内容。

var originalLeave = $.fn.popover.Constructor.prototype.leave;
        $.fn.popover.Constructor.prototype.leave = function(obj){
            var self = obj instanceof this.constructor ?
                obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
            var container, timeout;

            originalLeave.call(this, obj);

            if(obj.currentTarget) {
                container = $(obj.currentTarget).siblings('.popover')
                timeout = self.timeout;
                container.one('mouseenter', function(){
                    //We entered the actual popover – call off the dogs
                    clearTimeout(timeout);
                    //Let's monitor popover content instead
                    container.one('mouseleave', function(){
                        $.fn.popover.Constructor.prototype.leave.call(self, self);
                    });
                })
            }
        };
        var attr = 'tooltip-user-id';
        if ($('a['+ attr +']').length)
            $('a['+ attr +']').popover({
                html: true,
                trigger: 'click hover',
                placement: 'auto',
                content: function () {
                    var this_ = $(this);
                    var userId = $(this).attr(attr);
                    var idLoaded = 'tooltip-user-id-loaded-' + userId;
                    var $loaded = $('.' + idLoaded);
                    if (!$loaded.length) {
                        $('body').append('<div class="'+ idLoaded +'"></div>');
                    } else if ($loaded.html().length) {
                        return $loaded.html();
                    }
                    $.get('http://example.com', function(data) {
                        $loaded.html(data);
                        $('.popover .popover-content').html(data);
                        this_.popover('show');
                    });
                    return '<img src="' + base_url + 'assets/images/bg/loading.gif"/>';
                },
                delay: {show: 500, hide: 1000},
                animation: true
            });

您可以在http://kienthuchoidap.com上查看。转到此并将鼠标悬停到用户的用户名。

对我来说，更改数据内容之前的加载弹出窗口：

$('.popup-ajax').data('content', function () {
    var element = this;
    $.ajax({
        url: url,
        success: function (data) {

            $(element).attr('data-content', data)

            $(element).popover({
                html: true,
                trigger: 'manual',
                placement: 'left'
            });
            $(element).popover('show')
        }})
})

这对我有用，此代码修复了可能的对齐问题：

<a class="ajax-popover" data-container="body" data-content="Loading..." data-html="data-html" data-placement="bottom" data-title="Title" data-toggle="popover" data-trigger="focus" data-url="your_url" role="button" tabindex="0" data-original-title="" title="">
  <i class="fa fa-info-circle"></i>
</a>

$('.ajax-popover').click(function() {
  var e = $(this);
  if (e.data('loaded') !== true) {
    $.ajax({
      url: e.data('url'),
      dataType: 'html',
      success: function(data) {
        e.data('loaded', true);
        e.attr('data-content', data);
        var popover = e.data('bs.popover');
        popover.setContent();
        popover.$tip.addClass(popover.options.placement);
        var calculated_offset = popover.getCalculatedOffset(popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight);
        popover.applyPlacement(calculated_offset, popover.options.placement);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        return instance.content('Failed to load data');
      }
    });
  }
});

以防万一，我正在使用的端点返回html（一个rails部分）

我从这里获取了部分代码https://stackoverflow.com/a/13565154/3984542