引入Bootstrap 5后jQuery点击事件失效的解决方法咨询

一、修复jQuery与Bootstrap 5的兼容问题 #

点击无响应大概率是脚本引入顺序或全局变量冲突导致的，按以下步骤排查修复：

1. 调整脚本引入顺序
   Bootstrap 5的JS不依赖jQuery，但如果同时使用两者，必须保证jQuery在Bootstrap JS之前加载，自定义脚本放在最后，示例：

   <!-- 先加载jQuery -->
   <script src="jquery-3.7.1.min.js"></script>
   <!-- 再加载Bootstrap 5 JS（推荐用bundle版，已包含Popper） -->
   <script src="bootstrap.bundle.min.js"></script>
   <!-- 最后加载你的自定义交互脚本 -->
   <script src="your-custom-script.js"></script>
   

2. 解决$全局变量冲突
   如果页面中有其他库也使用$，或者Bootstrap的隐式操作影响了$的指向，可改用jQuery的noConflict模式，或者直接用jQuery代替$：

   // 方案1：使用noConflict，在回调内安全使用$
   jQuery.noConflict();
   jQuery(document).ready(function($) {
     $('#show-btn').click(function() {
       $('#target-input').toggle();
     });
   });
   
   // 方案2：直接用jQuery代替$
   jQuery(document).ready(function() {
     jQuery('#show-btn').click(function() {
       jQuery('#target-input').toggle();
     });
   });
   

3. 检查控制台报错
   打开浏览器开发者工具的控制台，查看是否有元素未找到、方法未定义等报错——比如如果你的按钮或输入框被Bootstrap的类修改了ID/结构，会导致jQuery选择器失效，这是最常见的隐性问题。

二、纯Bootstrap 5实现点击显示输入框 #

Bootstrap 5自带的Collapse组件可以零JS代码实现切换显示/隐藏，完全不需要jQuery，还能和Bootstrap的表单、导航栏等组件无缝配合：

完整代码示例 #

<!-- 触发按钮，用Bootstrap的btn类美化 -->
<button class="btn btn-primary" type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#input-container" 
        aria-expanded="false" 
        aria-controls="input-container">
  显示输入框
</button>

<!-- 包裹输入框的折叠容器，id要和按钮的data-bs-target对应 -->
<div class="collapse mt-3" id="input-container">
  <input type="text" class="form-control" placeholder="请输入内容">
</div>

<!-- 只需引入Bootstrap 5的bundle版JS（包含Popper，无需额外依赖） -->
<script src="bootstrap.bundle.min.js"></script>

这个方案利用Bootstrap的原生数据属性实现交互，样式统一，后续扩展导航栏等功能时也不会出现冲突问题。

内容的提问来源于stack exchange，提问作者momiqb