Using bootstrap popover callback

问题

I'm currently using bootstrap popovers to add some additional fields to my form. To format my select boxes, I need to take advantage of the popover callback, however I seem to be unable to get the callback to fire. If you prefer to use jsfiddle, check it out here. Thanks for any suggestions.

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

回答1:

There is no popover option showCallback instead try using one of Bootstraps built in popover events

So for example triggering the alert when the popover is shown you would do this

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

I updated your JS Fiddle for an example...

回答2:

Try this: I have added a callback function by using prototype of jquery.

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');
  }
});

Have updated in your fiddle.

来源：https://stackoverflow.com/questions/36546217/using-bootstrap-popover-callback

标签

javascript

jquery

twitter-bootstrap

bootstrap-popover