calls different file each tab open on bootstrap with jquery and return the response to the selected tab

I have HTML page with bootstrap. There are some tabs on the page, I want everytime I select a tab it calls a PHP fille via Ajax and return the result to the tab. Here is the code I have

HTML

<div class="widget-head-color-box grey-bg">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li><a class="nav-link active" data-toggle="tab" href="#home" data-file="home.php"> <i class="fa fa-home"></i></a></li>
                        <li><a class="nav-link" data-toggle="tab" href="#orders" data-file="orders.php"><i class="fa fa-desktop"></i></a></li>
                        <li><a class="nav-link" data-toggle="tab" href="#profil" data-file="profil.php"><i class="fa fa-user"></i></a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="home" class="tab-pane active">
                            home
                        </div>
                        <div id="orders" class="tab-pane">
                            orders
                        </div>
                        <div id="profil" class="tab-pane">
                            profil
                        </div>
                    </div>
                </div>
            </div>

Here is the Jquery

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
e.preventDefault();
var target = $(e.target).attr('href');
var targetId = target.substring(1);
var file = $(e.target).data('file'); // Ambil nilai data-file

$.ajax({
  type: 'POST',
  url: file, // Panggil file PHP yang sesuai
  data: { tab: targetId },
  success: function(data) {
    $('#' + targetId).html(data); // Tampilkan hasil di tab
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

});

And for the PHP I just do a simple response text to make sure it works. I have checked the browser debug console, no request to the PHP file and no response as well. It shere something miss with the code? Thanks for any help

Edited:
Tabs work fine, it change everytime I click on it. I put a simple text in each tab and confirmed text change on each tab.

Edited:
To make sure event handler works I tried this code

console.log('Kode dimuat');
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                console.log('Event handler dipanggil');
                // Kode event handler
            });

And it works, I can see the response in console

Edited:
I found the problem, data-bs-toggle is not supported by 3.1.1 I change it to data-toggle and now works.

Thanks all