带有 ajax 加载数据的 Bootstrap .popover()答案

【问题标题】：Bootstrap .popover() with ajax loaded data带有 ajax 加载数据的 Bootstrap .popover()
【发布时间】：2021-02-15 09:46:04
【问题描述】：

我有以下设置，这使得弹出框出现在第二个悬停事件上，因为它尚未创建。数据是通过 ajax 调用的，我需要在此之前以某种方式创建 .popover() ，然后再成功激活它。

$('.entry').on('mouseenter', function () {
    var achievementId = $(this).attr('data-entry-achievement-id');
    var entry = this;

    var entryData = function(response) {
        var result = response;
        $(entry).popover({
            html: true,
            placement: 'top',
            trigger: 'hover',
            title: result.data.definition,
            content: result.data.achieved_at
        }, "show");
    }
    $.ajax({
        type: "GET",
        url: 'href here..',
        datatype: "json",
        success: entryData,
    });
});

我怎样才能做到这一点？

【问题讨论】：

您好，您还在寻找答案吗？
@Swati ，是的，我仍在努力解决这个问题。
您使用的是哪个版本的 boostrap ？
介于 >= 3

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这可行，但是由于服务器响应或任何原因，我收到以下错误：

$('.entry').popover();
$('.entry').hover( function () {
    var achievementId = $(this).attr('data-entry-achievement-id');
    var entry = this;

    var entryData = function(response) {
        var result = response;

        $(entry).popover('destroy').popover({
            html: true,
            placement: 'top',
            trigger: 'hover',
            title: result.data.definition,
            content: result.data.achieved_at
        });

        $(entry).popover("show");
    }
    $.ajax({
        type: "GET",
        url: '/bettleverse/get-achievement-info-for-hover/?achievement=' + achievementId,
        datatype: "json",
        success: entryData,
    });
});

// Error shown in console:

tooltip.js:380 Uncaught TypeError: Cannot read property 'trigger' of null
at HTMLDivElement.complete (tooltip.js:380)
at HTMLDivElement.fn (jquery.js:4496)
at HTMLDivElement.handle (transition.js:54)
at HTMLDivElement.dispatch (jquery.js:4737)
at HTMLDivElement.elemData.handle (jquery.js:4549)
at Object.trigger (jquery.js:7807)
at HTMLDivElement.<anonymous> (jquery.js:7875)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.trigger (jquery.js:7874)

【讨论】：

【解决方案2】：

您可以在弹出框悬停时添加一些加载消息或微调器，以便显示消息，并且当收到来自 ajax 的响应时，您可以替换它。

演示代码：

$('.entry').popover({
  title: "Coming..",
  placement: 'bottom',
  trigger: 'hover',
  html: true,
  content: function() {
    return "<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>"
  }
});

$('.entry').on('mouseenter', function() {
  var achievementId = $(this).attr('data-entry-achievement-id');
  var entry = this;
  /* var entryData = function(response) {
     var result = response;*/
  setTimeout(function() { //this is just for demo to show effect after ajax success 
    //get div popover classs..find then popover content
    $(entry).siblings(".popover:first").find(".popover-title").text("Done ..") //for title change
    var popover = $(entry).siblings(".popover:first").find(".popover-content");
    popover.text("YOUR NEW TEXT"); //for body change
  }, 1000)
  /*}
  /*$.ajax({
    type: "GET",
    url: '',
    success: entryData,
  });*/
});

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<a data-entry-achievement-id="ss" class="entry" title="">Testlink1</a>

【讨论】：