我在 Meteor 中的 bootstrap 弹出窗口有什么问题?
What is wrong with my bootstrap popover in Meteor?
我安装了 bootstrap.js,但我无法在点击时显示弹出窗口。
这是我的 html:
<span data-sentenceindex="1">
<div class="word" data-wordid="EA9jNKEAiHmZDwFp7" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">Shang4di4</p>
<h3 class="thinnerTop">你好</h3>
</div>
<div class="word" data-wordid="6gNwivPpCpyfstTjC" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">fa1chu1</p>
<h3 class="thinnerTop">发出</h3>
</div>
</span>
这是我的模板:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
这是 onRender:
Template.word.onRendered(function() {
return $('[data-toggle="popover"]').popover()
})
我错过了什么?
答案是我需要将 tabindex="0" 添加到 div。
像这样:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
tabindex="0"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom text-muted">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
我安装了 bootstrap.js,但我无法在点击时显示弹出窗口。
这是我的 html:
<span data-sentenceindex="1">
<div class="word" data-wordid="EA9jNKEAiHmZDwFp7" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">Shang4di4</p>
<h3 class="thinnerTop">你好</h3>
</div>
<div class="word" data-wordid="6gNwivPpCpyfstTjC" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">fa1chu1</p>
<h3 class="thinnerTop">发出</h3>
</div>
</span>
这是我的模板:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
这是 onRender:
Template.word.onRendered(function() {
return $('[data-toggle="popover"]').popover()
})
我错过了什么?
答案是我需要将 tabindex="0" 添加到 div。
像这样:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
tabindex="0"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom text-muted">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>