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

Question

我正在我的 <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

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
• 点击
• 显示.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>