jquery - 在 Arshaw fullcalendar 的 dayClick 上打开 TwitterBootstrap 3.0 弹出框

Question

我正在尝试将 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>

参考

• 将 qtip 添加到完整日历- 如何访问日历日
• 将表单添加到弹出框- 引导弹出框内的 HTML 表单

JSFIDDLE

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

Answer 1

尝试这个

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

Answer 2

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

                     $(this).popover({

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