Bootstrap Popover 防止在特定条件下显示

Question

我在 <button> 和 data-trigger="click" 上使用 bootstrap 弹出框。但是当用户点击那个 <button> 时，我希望它预先检查一些东西并防止弹出窗口显示。例如，如果表单中的输入仍然是空的，则popover不会显示，否则将正常显示。

怎么做？我知道像 .on('show.bs.popover' 这样的 BS 弹出事件，但我仍然无法完成它。

我试过这样做：

btn_register.on('show.bs.popover',function() { //when bs popover about to show
     if (...) $(this).popover('hide');
});

但是弹出窗口在它隐藏之前的几毫秒内出现。 _(:"3

Answer 1

简介：

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
点击
shown.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>

Bootstrap Popover 防止在特定条件下显示

Bootstrap Popover Prevent Show in Particular Condition

jquery

twitter-bootstrap

bootstrap-popover