为什么单击按钮时脚本不起作用？

Question

I have a button which when user click on it, phone numbers will be appear slowly.

Here is the HTML Codes:

<span id="show-phone-numbers" href="#tab4" data-bs-toggle="tab" class="btn btn-success">
   <i class="fe fe-phone-call"></i> Show Phone Number
</span> 

<div class="media margin-top-20" id="phone-number-section" style="display:none">
    <div class="media-body text-center">

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                    

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                
     </div>
</div>

And here is the scripts:

$("#show-phone-numbers").on("click",function(){
    $("#phone-number-section").toggle("slow");
});

The problem is when I click on the "Show Phone Number" button, I get this error in the console:

enter image description here

And (bootstrap-rtl.js:1031:35) is the code below:

children(element, selector) {
  return [].concat(...element.children).filter(child => child.matches(selector));
},

I did search about the error but I couldn't find a way which help me to handle this error.

Answer 1

Why do you have data-bs-toggle="tab" in there, without any bootstrap tab elements? This causes the BS event handler to be registered, which throws this error, because it can't find properly setupped tabs.