在 Arshaw fullcalendar 的 dayClick 上打开 TwitterBootstrap 3.0 弹出框答案

【问题标题】：Open TwitterBootstrap 3.0 popover on dayClick of Arshaw fullcalendar在 Arshaw fullcalendar 的 dayClick 上打开 TwitterBootstrap 3.0 弹出框
【发布时间】：2013-09-29 10:59:36
【问题描述】：

我正在尝试将 Bootstrap 中的弹出框与完整日历集成，但弹出框未显示。代码 isspector 显示 HTML 已被修改，并且属性 data-original-title="" title="" 已设置，因此代码正在运行，但弹出窗口未显示。

这是我正在使用的代码：

$(document).ready(function() {
    $('#myCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },
        events: './jobs/event-feed.php',
        editable: true,
        selectable: true,
        dayClick: function(start, end, allDay, jsEvent, view) {

            $(this).popover({
                html: true,
                placement: 'top',
                title: function() {
                    return $("#popover-head").html();
                },
                content: function() {
                    return $("#popover-content").html();
                }
            });
        }

    });

});

#popover-head 和 #popover-content

<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
    <form>
          <input type="text" name="asa" value="asa" />
    </form>
</div>

参考文献

Adding qtip to full calendar - 如何访问日历日
Adding form to popover - 引导弹出框内的 HTML 表单

JSFIDDLE

http://jsfiddle.net/tUNSW/2/

【问题讨论】：

标签： jquery twitter-bootstrap fullcalendar

【解决方案1】：

试试这个

$(this).popover({
            html: true,
            placement: 'top',
            title: function() {
                return $("#popover-head").html();
            },
            content: function() {
                return $("#popover-content").html();
            }
        });
$(this).popover('show');

【讨论】：

谢谢！那行得通。但是你能解释一下为什么需要$(this).popover('show'); 吗？如果将相同的代码应用于锚标记（JSFIDDLE 中的示例）
$(this).popover({ html: true, place: 'top', title: function() { return $("#popover-head").html(); }, 内容: function() { return $("#popover-content").html(); } });这一行将弹出框分配给 $(this)。然后下一步单击显示弹出框。但当前点击不显示任何内容。 $(this).popover('show'); --> 触发弹出框（点击事件）。如果你的问题解决了，请标记答案。

【解决方案2】：

如果弹出窗口没有通过单击隐藏，请尝试此操作。

                     $(this).popover({

                      html: true,
                      placement: 'top',
                      title: function() {
                          return $("#popover-head").html();
                      },
                      content: function() {
                          return $("#popover-content").html();
                      }
                  });
          $(this).popover('toggle');

【讨论】：