隐藏事件上的 Bootstrap 3 popover 回调不起作用

Question

在this example 之后，我尝试实现一个隐藏的回调函数，但是虽然show 回调工作得很好，但没有办法让hidden 回调工作。有人可以解释为什么会这样吗？

我创建了this fiddle 来复制问题。

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hidden;
  $.fn.popover.Constructor.prototype.hidden = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

---

更新

我创建了一个新的 jsFiddle 来展示 Christos 的第二个 sn-p 应用于 Bootstrap 的 jQBTK 插件。这个插件利用 Bootstrap 的 Popovers 来创建一个虚拟键盘。 问题：事件绑定到动态创建的对象，因此它们会触发多次。如何优化？

Answer 1

在hiddenCb，原型函数被命名为hide，而不是你在代码中的hidden，所以$.fn.popover.Constructor.prototype.hidden必须是$.fn.popover.Constructor.prototype.hide。

这些原型函数是popover 的methods，而不是events。有方法.popover('hide')，但没有方法hidden。您的代码正在运行，因为 popover 调用方法 show 和 hide 而不是触发事件。

code you found 实际上是一个hack，它挂钩/更改默认show 和hide 方法以触发您的函数以及popover 默认代码，当你想处理这些事件。

要使其在您的代码中工作，请将hidden 方法更改为hide：

$(document).ready(function() {
  var showCb = $.fn.popover.Constructor.prototype.show;
  $.fn.popover.Constructor.prototype.show = function () {
    showCb.call(this);
    if (this.options.showCb) {
      this.options.showCb();
    }
  }
  
  var hiddenCb = $.fn.popover.Constructor.prototype.hide;
  $.fn.popover.Constructor.prototype.hide = function () {
    hiddenCb.call(this);
    if (this.options.hiddenCb) {
      this.options.hiddenCb();
    }
  }
  
  $("[data-toggle=popover]").popover({
    showCb: function() {
      alert('showCb');
    },
    hiddenCb: function() {
      alert('hiddenCb');
    }
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

但是，如果您想正确处理 show.bs.popover、shown.bs.popover、hide.bs.popover 和 hidden.bs.popover 事件，那么您应该使用 on 和更简单的代码来实现：

$(document).ready(function() {
  $("[data-toggle=popover]")
    .popover()
    .on('shown.bs.popover', function() {
      alert('showCb!');
    })
    .on('hidden.bs.popover', function () {
      alert('hiddenCb!');
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

更新

对于jQBTK，您只需使用click trigger，然后使用事件。这只会触发每个显示/隐藏的事件一次：

$('input').keyboard({
  trigger: 'click',
})
.on('shown.bs.popover', function() {
  console.log('shownCb!');
})
.on('hidden.bs.popover', function () {
  console.log('hiddenCb!');
});

检查这个工作jsFiffle。