Bootstrap Popover 内容不显示

Posted 2023-05-08

【中文标题】Bootstrap Popover 内容不显示

【英文标题】：Bootstrap Popover Content Not Showing

【发布时间】：2018-02-03 18:47:51

【问题描述】：

您好，我正在使用 Tiva 事件日历，它在单独的文件中从 JS 生成 html。

我在日历中的日期框上使用弹出框，其中的数据来自我的 index.html 上的数据库，其中也包括 calendar.js。

我无法显示弹出框内容。我正在创建内容 div

calendar.js 文件并在 index.html 上启动弹出框。

如果我使用静态内容进行弹出框，它会显示，但如果我使用 getPopContent() 函数，它不会。

要么我的 JS 生成弹出框 HTML 不起作用，要么函数在内容之前加载。

我花了一整天的时间却想不通。

请帮忙。谢谢

jQuery(document).ready(function()

calendarString += '<div id=\"'+ events[t].id +'-content\" style=\"display:none;\"></div>';
														
											$(events[t].id + "-content").html('<div class="event-tooltip-item">'
												+ '<div class="event-name">' + events[t].name + '</div>'
												+ '<div class="event-image">' + events[t].image + '</div>'
												+ '<div class="event-intro">' + getShortText(events[t].description, 10) + '</div>'
												+ '</div>'
											);


calendarString += '<div class=\"calendar-event-name event-60 pop ' + event_class + ' color-' + color + '\" id=\"' + events[t].id + '\" ><span class="event-image"><img src="admin/event/images/' + events[t].image + '"  /></span><a class="event-name">'+ events[t].name +'</a><\/div>';
												



$(window).load(function () 
   var popOverSettings = 
              placement: 'left',
              container: 'body',
              html: true,
              trigger: "manual",
              /*content: function () 
                  return $('#popover-content').html();
              */
              content: function () 
                  getPopContent($(this).prop("id"))
              
          

      $(".pop").each(function() 
          var $this = $(this);
          

          var $pElem= $this;
          $pElem.popover(popOverSettings).on("mouseenter", function () 
              var _this = this;
              $(this).addClass("grayscale").fadeTo(400,0.8);
              $(this).popover("show");
              $(".popover").on("mouseleave", function () 
                  $(_this).popover('hide');
              );
          ).on("mouseleave", function () 
              var _this = this;
              $(this).removeClass("grayscale").fadeTo(400,1);
              setTimeout(function () 
                  if (!$(".popover:hover").length) 
                      $(_this).popover("hide");
                  
              , 200);
        );
      );
      
      function getPopContent(target) 
          
          return $("#" + target + "-content").html();
      ;
);

//Creating Calendar in JS

【问题讨论】：

您好，您的问题 sn-p 有一个错误，但是查看您的代码，您似乎正在尝试访问 getPopContent 函数中已更改的范围

而不是 getPopContent($(this).prop("id"));尝试 var x = $(this).prop("id"); getPopContent(x)

@jidexl21 我试过了......我已经完成了 console.log() 来检查值。他们过得很好。但弹出内容 div 仍然为空。

【参考方案1】：

我已经通过@jidexl21 的建议解决了上述问题。

而不是：返回 getPopContent(id_current) 我用了： var content = getPopContent(id_current) 返回内容；