【问题标题】:Bootstrap popover on click event not showing单击事件上的引导弹出窗口未显示
【发布时间】:2015-04-06 04:07:19
【问题描述】:

当我在完整日历中触发 evenLimitClick 事件时,我的弹出框不工作。它在我的 dayClick 事件中运行良好,但在我的 eventLimitClick 中没有任何反应。这是我的fiddle 我什至尝试将弹出框设置为在父级上调用(例如 $(this).parent().popover,但这也不起作用。

$(document).ready(function () {

    // page is now ready, initialize the calendar...
    var eventsArray = [{
        title: 'Test1',
        start: new Date()
    }, {
        title: 'Test2',
        start: new Date("2015-04-21")
    }, {
        title: 'Test3',
        start: new Date("2015-04-21")
    }];

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: 'prev,next', //today',
            center: 'title',
            right: ''
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: false,
        selectable: true,
        events: eventsArray,
        eventLimit: 1,

        eventLimitClick: function (cellInfo, jsEvent) {
            $(this).popover({
                html: true,
                placement: 'bottom',
                container: 'body',
                title: function () {
                    return $("#events-popover-head").html();
                },
                content: function () {
                    return $("#events-popover-content").html();
                }
            });

            $(this).popover('show');
        },
        dayClick: function (cellInfo, jsEvent) {
            $(this).popover({
                html: true,
                placement: 'bottom',
                container: 'body',
                title: function () {
                    return $("#events-popover-head").html();
                },
                content: function () {
                    return $("#events-popover-content").html();
                }
            });

            $(this).popover('show');
        },
    })

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>

<div style="border:solid 2px red;">
    <div id='calendar'></div>
    <div id="events-popover-head" class="hide">Events</div>
    <div id="events-popover-content" class="hide">Test</div>
</div>

【问题讨论】:

  • 你不是只从 jquery 调用 js 文件吗?你的引导 js 在哪里?
  • 嗨。在我的小提琴中,你可以看到我检查了引导版本。小提琴正在加载引导程序。 SO 上的 sn-p 不起作用,所以强迫我为任何有小提琴链接的问题插入代码。
  • 哦,对不起,我没有看到 jsfiddle 链接
  • 如果你能帮助我,我将不胜感激

标签: javascript jquery html twitter-bootstrap bootstrap-popover


【解决方案1】:

在 eventLimitClick 事件更改如下:

$(this).popover

$(cellInfo.dayEl)

cellInfo.dayEl 是您要为其显示弹出框的已单击 Day 单元格元素。

我也更新了Fiddle

【讨论】:

  • 谢谢@puneet,这对我也有帮助。
猜你喜欢
  • 2015-02-16
  • 1970-01-01
  • 1970-01-01
  • 2020-08-01
  • 2015-06-27
  • 2020-07-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多