Question

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

我在日历中的日期框上使用了一个popover，数据来自我的index.html上的数据库，其中还包含calendar.js。

我无法显示弹出窗口内容。我在

中创建内容div

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

如果我使用静态内容进行弹出，则显示但是如果我使用getPopContent（）函数则不会。

生成popover HTML的JS无法正常工作，或者在内容之前加载了函数。

我已经度过了一整天，但无法理解。

请帮忙。感谢

＆＃13;

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 + '" alt="' + events[t].name + '" /></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();
      };
});

＆＃13;

//Creating Calendar in JS

＆＃13;

Answer 1

我已经用@ jidexl21建议解决了上述问题。

而不是：return getPopContent（id_current）我用了： var content = getPopContent（id_current）返回内容;

Bootstrap Popover内容未显示

1 个答案: