使用引导程序popover回调

Using bootstrap popover callback

本文关键字：回调 popover 引导程序      更新时间：2024-04-29

我目前正在使用引导程序popover向表单中添加一些额外的字段。要格式化我的选择框，我需要利用popover回调，但我似乎无法启动回调。如果你更喜欢使用jsfiddle，请在这里查看。谢谢你的建议。

$("[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>

没有popover选项showCallback，而是尝试使用popover事件中内置的Bootstrap之一

因此，例如，当弹出窗口显示时触发警报，您可以执行此

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

我更新了你的JS Fiddle作为一个例子。。。

试试这个：我使用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');
  }
});

已经更新了你的小提琴。

相关文章：