如何从Bootstrap接收shown.bs.collapse事件？

Question

我无法从Bootstrap 3.3.6接收shown.bs.collapse事件。我已经检测了我的bootstrap.js，以确保事件在我认为的位置被激发：

this.$element.trigger('shown.bs.collapse')
console.log("triggered shown.bs.collapse on #" + this.$element.attr("id"))

在我的文档ready中，我尝试使用jQuery和纯JS注册事件：

$('.panel-collapse').on('shown.bs.collapse', function () {
    console.log("listener called");
});

...or...

var panels = document.getElementsByClassName("panel-collapse");
for (var i = 0; i < panels.length; ++i) {
    console.log("adding event listener to #" + panels[i].getAttribute("id"));
    panels[i].addEventListener("shown.bs.collapse", function () {
        console.log("listener called");
    });
}

JS版本记录的元素ID与在bootstrap.js中触发事件时记录的元素ID相同，证明我将侦听器附加到了正确的元素。但它从来没有被调用过。

更奇怪的是，这一切都可以在jsfiddle中工作，但当我们将代码复制到应用程序中时就不行了。我想是某个包的版本或者设置搞砸了。是什么导致了这种情况？

Answer 1

根据this Stack Overflow post的说法，您不能将".addEventListener“用于自定义jQuery事件(例如"shown.bs.collapse")。

不过，我不能说为什么jQuery的".on“版本不能工作。