Rails 7 javascript bootstrap-table event listener not work

Question

I'm using rails 7 with esbuild.

Here is my app/javascript/bootstrap-table-custom.js:

$(document).ready(function(){
    initTable();
});

function initTable() {
    var $table = $('#table');
    $table.on('all.bs.table', function (e, name, args) {
      console.log(name, args)
    })
}

and my test.html.erb:

<div class="table-responsive">
  <table
  id="table"
  data-toggle="table">
    ...
  </table>
</div>

The listeners will work if I add move this line to test.html.erb:

var $table = $('#table');

But I need the event listeners for many places and I don't want to repeat this code. I'm wondering why the listeners not work?

app/javascript/bootstrap-table.js:

import 'bootstrap-table'

...//other librarys

import './bootstrap-table-custom' // at the end of file

Thanks for help.