使用 bootstrap 弹出窗口回调

Question

我目前正在使用 bootstrap 弹出窗口向我的表单添加一些额外的字段。要格式化我的 select 框，我需要利用弹出窗口回调，但我似乎无法触发回调。如果您更喜欢使用 jsfiddle，check it out here. 感谢您的任何建议。

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  },
  showCallback: function() {
    alert('called back');
  }
});

.container {
  padding: 20px;
}
.form-control {
  width: 120px;
}
.popover {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Bootstrap 3 Popover HTML Example</h3>
  <ul class="list-unstyled">
    <li><a data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a>
    </li>
    <div id="popover-content" class="hide">
      <form class="form-inline" role="form">
        <div class="form-group">
          <h1>My content</h1>
        </div>
      </form>
    </div>
  </ul>
</div>

Answer 1

没有弹出窗口选项 showCallback 而是尝试使用 popover events

中内置的 Bootstrap 之一

因此，例如在显示弹出窗口时触发警报，您可以这样做

$("[data-toggle=popover]").on('shown.bs.popover', function () {
    alert('called back');
});

我更新了你的 JS Fiddle 作为例子...

Answer 2

试试这个：我使用 jquery 的 prototype 添加了一个回调函数。

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

this.$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  },
  callback: function() {
    alert('called back');
  }
});

已在您的 fiddle 中更新。

使用 bootstrap 弹出窗口回调

Using bootstrap popover callback

javascript

jquery

twitter-bootstrap

bootstrap-popover