Bootstrapについてくるjavascriptのcollapseを使うとアコーディオン風のUIが簡単に作れるから便利。

JavaScript · Bootstrap

で、隠れていたものが表示されたときに何かしたいってときのためにshown.bs.collapseっていうイベントが用意されているんだけど、このイベント、ajaxとかで追加した要素ではちゃんと呼ばれない。

っていうかこれは別にこのイベントに限った話じゃなくて、javascriptのイベント全般の話なんだけどよく忘れるのでメモ的に残しておく。今回気がつきにくかったのはBootstrapだから違うかもと思ってしまったのが原因かも…？

基本はdocument readyで↓みたいにすればいいんだけど、

$('.collapse').on('shown.bs.collapse', function(){
  // do something
});

追加要素の場合はこれが呼ばれていないことになっちゃうから、.collapseじゃなくてdocumentにくっつけておく必要がある。

$(document).on('shown.bs.collapse', '.collapse', function(){
  // do something
});

これだと最初にdocumentにイベントとハンドラが紐付けられるから、後から追加した要素でも問題なく動いてくれる。