Bootstrap 5.2.3中addEventListener无法使用的问题咨询

我有一个示例页面，Bootstrap模态框（dialog）由服务器返回，需要将其显示在DIV中。点击触发后出现如下错误：

Uncaught TypeError: myModal.addEventListener is not a function

错误出现在以下代码行：

myModal.addEventListener('show.bs.modal', function () {

代码示例如下：

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" type="text/css" />
</head>

<body>
  <p><a href="#" onclick="showSubscriptionInfo();">Open dialog</p>
     <div id="myDiv"></div>
   </body>
   
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> 
   <script>
   function showSubscriptionInfo(){
     var data = ''+
      '<div class="modal fade" id="subsModal" tabindex="-1" aria-labelledby="exampleModalLabel">'+
      '  <div class="modal-dialog">'+
      '    <div class="modal-content" style="height:450px">'+
      '      <div class="modal-body">'+
               '<p>xxx</p>'+
      '      </div>'+
          '<div class="modal-footer">'+
          '  <button type="button" class="button" data-bs-dismiss="modal">Close</button>'+
          '</div> '+
      '    </div>'+
      '  </div>'+
      '</div>';
    
     document.getElementById('myDiv').innerHTML = data;
     var myModal = new bootstrap.Modal(document.getElementById('subsModal'));
     myModal.show();
     
     myModal.addEventListener('show.bs.modal', function () {
       alert(1);
     }, { once: true });
     myModal.addEventListener('hide.bs.modal', function () {
       alert(2);
     }, { once: true });
     
   }
   </script>

核心原因 #

myModal是Bootstrap封装的Modal实例对象，并非原生DOM元素。addEventListener是原生DOM元素的方法，Bootstrap的Modal实例不提供该方法，因此触发类型错误。

另外代码还存在两个隐性问题：

1. 先调用myModal.show()再绑定事件，show.bs.modal事件已经触发完成，后续绑定的回调不会执行。
2. 每次点击都会向myDiv插入重复的模态框DOM，可能引发后续逻辑冲突。

解决步骤 #

1. 正确绑定Modal事件

Bootstrap 5的Modal实例需使用自身的add方法绑定事件，而非原生的addEventListener：

// 替换原有的addEventListener代码
myModal.add('show.bs.modal', function () {
  alert(1);
}, { once: true });
myModal.add('hide.bs.modal', function () {
  alert(2);
}, { once: true });

也可以直接在模态框DOM元素上绑定原生事件（事件名需保留bs.前缀）：

const modalElement = document.getElementById('subsModal');
modalElement.addEventListener('show.bs.modal', function () {
  alert(1);
}, { once: true });
// 再实例化Modal
var myModal = new bootstrap.Modal(modalElement);

2. 调整事件绑定顺序

必须先绑定事件，再调用show()，否则show.bs.modal事件已触发，回调无法执行：

// 正确顺序：绑定事件 → 调用show
myModal.add('show.bs.modal', ...);
myModal.add('hide.bs.modal', ...);
myModal.show();

3. 避免重复插入模态框

每次调用函数前，先清空myDiv的旧内容，防止重复DOM：

function showSubscriptionInfo(){
  const myDiv = document.getElementById('myDiv');
  // 清空旧内容
  myDiv.innerHTML = '';
  // 插入新模态框HTML
  var data = ''+...; // 原模态框HTML代码
  myDiv.innerHTML = data;
  // 后续实例化及事件绑定逻辑...
}

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