jquery – 使自定义html模板使自举popover工作

我正在使用输入组文本框,我需要Bootstrap 3 popover才能正常工作,而Popover模板应该由我设计和设计.
所以我目前与我的html是：

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

当输入组图标点击时,我想要一个popover打开.在这种情况下,当单击类别glyphicon-time的跨度时,弹出窗口或显示为以下HTML：

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS写道：

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">','<div class="arrow"></div>','<div class="popover-content">','<div class="timePickerCanvas"></div>','<div class="timePickerClock timePickerHours"></div>','<div class="timePickerClock timePickerMinutes"></div>','</div>','</div>'].join('');


    $('body').popover({
        selector: '[rel=popover]',trigger: 'click',template: popoverTemplate,placement: "bottom",html: true
    });
});

看到这里的小提琴：http://www.bootply.com/4fMzxGRpik

任何人都可以帮助我纠正我在做什么错误,以及需要做些什么来显示一个popvhover.

解决方法

你缺少popover的内容,你需要这样的东西

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">','</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>','<div class="timePickerClock timePickerHours">asdf asdfasf</div>','<div class="timePickerClock timePickerMinutes"> asfa </div>',].join('');


    $('body').popover({
        selector: '[rel=popover]',content: content,html: true
    });
});

Working demo

原文地址：https://www.jb51.cc/jquery/180555.html