Question

我在<button>上使用data-trigger="click"使用自举弹出窗口。但是当用户点击<button>时，我希望它事先检查一下并阻止弹出窗口显示。例如，如果表单中的输入仍然为空，则popover不会显示，否则它将显示为正常。

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

我试过这样做：

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

但是popover在隐藏之前会在几毫秒内出现。 _（：＆＃34; 3

Answer 1

简介：

data-trigger="click"表示：如何触发popover - 单击|悬停|焦点|手册。你可以传递多个触发器;用空格隔开它们。手册不能与任何其他触发器结合使用。

这意味着：

当用户点击该按钮时，触发的事件序列为：

show.bs.popover
点击
shown.bs.popover

因此，您可以为click事件添加新的事件处理程序：

$('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” 并处理按钮点击事件中的所有内容。

Popover手册：

$('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防止在特定条件下显示

1 个答案: