前置到多个div中的按钮无法全部触发弹窗问题求助

我有一个可触发弹窗（popin）的按钮，将其添加到一个div后，再把该div前置到所有拥有相同类名.test-div的div中。目前遇到的问题是，只有最后一个被前置的按钮能触发弹窗，其余按钮均无法正常工作。

问题代码 #

// 获取弹窗
var modal = document.getElementById("myModal");

// 获取触发弹窗的按钮
var btn = document.getElementById("myBtn");

// 获取关闭弹窗的span元素
var span = document.getElementsByClassName("close")[0];

// 点击按钮打开弹窗
btn.onclick = function() {
  modal.style.display = "block";
}

// 点击span关闭弹窗
span.onclick = function() {
  modal.style.display = "none";
}

// 点击弹窗外部关闭弹窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


$(window).on('load', function() {
  function topBannerCaps() {
    if ($('#container').css('display') == 'block') {
      $('#myBtn').appendTo('#container');
    }
    $('#container').prependTo('.test-div');
  }
  requestAnimationFrame(topBannerCaps);
});

问题根源 #

1. 元素移动而非复制：执行$('#container').prependTo('.test-div')时，jQuery会将#container元素从当前位置移动到每个.test-div中，最终该元素只会停留在最后一个.test-div内，前面的div中并没有实际的按钮元素。
2. 事件绑定仅针对初始元素：通过btn.onclick绑定的点击事件，只会作用于页面加载时获取到的那个唯一#myBtn元素，后续移动或复制的按钮不会自动继承该事件。

解决方案 #

实现思路

给每个.test-div复制一份包含按钮的容器，并通过事件委托统一处理所有按钮的点击事件，确保所有复制的按钮都能触发弹窗。

修改后代码

<!-- 基础HTML结构 -->
<div id="container" style="display:block;">
  <button class="open-modal-btn">打开弹窗</button>
</div>
<div class="test-div">测试区块1</div>
<div class="test-div">测试区块2</div>
<div class="test-div">测试区块3</div>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>弹窗内容</p>
  </div>
</div>

// 弹窗核心逻辑
const modal = document.getElementById("myModal");
const closeBtn = document.querySelector(".close");

// 关闭弹窗
closeBtn.addEventListener('click', () => {
  modal.style.display = "none";
});

window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.style.display = "none";
  }
});

// 页面加载完成后处理按钮前置
$(window).on('load', function() {
  function topBannerCaps() {
    const $originalContainer = $('#container');
    if ($originalContainer.css('display') === 'block') {
      // 遍历所有目标div，复制容器并前置
      $('.test-div').each(function() {
        const $cloneContainer = $originalContainer.clone(true); // 复制元素及绑定的事件
        $cloneContainer.prependTo(this);
      });
      // 移除原始容器（按需选择）
      $originalContainer.remove();
    }
  }
  requestAnimationFrame(topBannerCaps);
  
  // 事件委托处理所有弹窗按钮
  $(document).on('click', '.open-modal-btn', () => {
    modal.style.display = "block";
  });
});

关键说明 #

• clone(true)的作用：复制元素时传入true，会同时复制元素上绑定的事件，确保复制后的按钮也能响应操作；
• 事件委托：通过绑定到document的事件委托，不管按钮是初始存在还是后续复制生成的，只要匹配.open-modal-btn类名，就能触发弹窗逻辑；
• 遍历复制：通过$('.test-div').each()给每个目标区块都复制一份按钮容器，避免元素移动导致的唯一性问题。

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