Bootstrap collapse events not working after generating table page in Ajax

Question

I'm using the "shown.bs.collapse" and "hidden.bs.collapse" bootstrap events in a table. On the first page the events are being triggered and listened just fine with

 $('#accordion')
   .on('shown.bs.collapse', function (e) {
       var id = e.target.id;
        loadBatchFileDetails(id);
   })
   .on('hidden.bs.collapse', function (e) {
       var id = e.target.id;
        $("#details_" + id).hide();
        $('#loader_' + id).show();
   });

put inside a document.ready. The table is paginated, and the other pages are generated with an ajax call and a success callback :

success: function (e) {
        $('#batchFilesList').html(e);

The issue is that the bootstrap events are no longer being listened afterwards. I tried to re-register the events in the callback just like every posts I found here suggested (e.g. Bootstrap 3 - Event hidden.bs.collapse not fired if the accordion is inside a modal populated via ajax), but nothing did the trick. All the other type of regular events are working when being registered in the callback or if the were already registered in the page, only the "[...].bs.collapse" ones are not being listened...

Any suggestions ? I tried so many things I'm out of ideas :/ I tried with the done(), $find() methods, tried other ajax complete/stop callbacks etc. but nothing worked.

Answer 1

Try this

$(document).on('shown.bs.collapse', '#accordion', function (e) {
   //your code
})