我正在使用 twitter bootstrap 在社交媒体上分享我的帖子,我创建了一个链接,其弹出窗口带有一些按钮内容,但是当我进一步点击弹出窗口中的按钮时,它们的弹出窗口功能不起作用。
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
和 js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
为了更多的清理,我创建了一个 fiddle还有。
最佳答案
您的代码运行良好。这只是一个 jsFiddle 设置问题。
在你的 fiddle 中,在左侧的下拉列表中选择 no wrap (head),单击 Run,它将起作用。
选择Onload时,您的功能是在$(document).ready(function(){})的关闭中定义的。仅有的。这就是它显示错误 Uncaught ReferenceError: Facebook is not defined
的原因(查看控制台)
顺便说一句,这是 plunkr 上的等效示例 enter link description here
关于javascript - Bootstrap Popover Inside Popover 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30953570/