我正在我的 <button>
上使用 bootstrap popover与 data-trigger="click"
。但是当用户点击<button>
时,我希望它事先检查一些内容并防止弹出窗口显示。例如,如果表单中的输入仍然为空,则弹出窗口将不会显示,否则将正常显示。
如何做到这一点?我知道 BS popover 事件,如 .on('show.bs.popover'
,但我仍然无法完成它。
我尝试过这样做:
btn_register.on('show.bs.popover',function() { //when bs popover about to show
if (...) $(this).popover('hide');
});
但是弹出窗口会在隐藏之前几毫秒内出现。 _(:"3
最佳答案
简介:
data-trigger="click" means: How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
这意味着:
当用户单击该按钮时,触发的事件顺序是:
- show.bs.popover
- 点击
- 显示.bs.popover
因此,您可以为单击事件添加新的事件处理程序:
$('button').on('click',function(e) {
console.log('button click triggered!')
if ($('[type="email"]').val().length == 0) {
$('button').popover('hide');
}
});
示例:
$('button').popover();
$('button').on('click',function(e) {
console.log('button click triggered!')
//
// do your test
//
if ($('[type="email"]').val().length == 0) {
$('button').popover('hide');
}
});
$('button').on('show.bs.popover',function(e) {
console.log('popover show.bs.popover triggered!');
});
$('button').on('shown.bs.popover',function(e) {
console.log('popover shown.bs.popover triggered!');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="button" class="btn btn-default" data-container="body" data-trigger="click"
data-toggle="popover" data-placement="top" data-content="PopOver Content.">
Popover on top
</button>
</form>
另一种方法是设置:data-trigger="manual"并处理按钮点击事件内的所有内容。
弹出窗口手册:
$('button').popover();
$('button').on('click',function(e) {
//
// do your test
//
if ($('[type="email"]').val().length != 0) {
$('button').popover('toggle');
} else {
$('button').popover('hide');
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="button" class="btn btn-default" data-container="body" data-trigger="manual"
data-toggle="popover" data-placement="top" data-content="PopOver Content.">
Popover on top
</button>
</form>
关于jquery - Bootstrap Popover 防止在特定条件下显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42558232/