如何在Handlebars模板中为模态框按钮添加EventListener？

问题根源 #

1. ID重复导致元素获取失效：所有按钮都用了id="mybtn"，所有模态框用id="modid"，getElementById只会返回第一个匹配元素，后续按钮和模态框完全没被绑定事件。
2. Handlebars模板变量在脚本中不生效：<script>标签里的{{@index}}不会被Handlebars编译，document.querySelector('.{{@index}}')实际是在查找类名为{{@index}}的元素，自然找不到目标按钮。
3. 变量重复声明：代码里先后用let btn和const btn声明同名变量，会触发语法错误（可能被浏览器静默处理，但影响逻辑执行）。

修正后的代码方案 #

Handlebars模板部分

<div>
    <div class="row">
        {{#each articles}}
        <div class="col-12-sm col-6-md col-3-lg">
            <div class="card m-2">
                <div class="card-body">
                    <h5 class="card-title">{{title}}</h5>
                    <p class="card-text">{{description}}</p>
                </div>
                <img class="card-image" src="{{urlToImage}}" alt="Card image cap">
                <!-- 用动态ID+data属性关联对应模态框 -->
                <button id="btn-{{@index}}" data-modal-id="modal-{{@index}}" class="modal-btn">Open Modal</button>
            </div>
        </div>
        {{/each}}
    </div>
</div>

{{#each articles}}
    <!-- 动态生成唯一模态框ID -->
    <div id="modal-{{@index}}" class="modal">
        <div class="modal-content">
            <!-- 关闭按钮同样用data属性关联模态框 -->
            <span class="close" data-modal-id="modal-{{@index}}">&times;</span>
            <h3>{{title}}</h3>
            <p>{{content}}</p>
            <!-- 这里可以添加文章的详细内容 -->
        </div>
    </div>
{{/each}}

JavaScript部分

// 用事件委托统一处理所有按钮和关闭事件
document.addEventListener('click', function(event) {
    // 处理模态框打开按钮
    if (event.target.classList.contains('modal-btn')) {
        const modalId = event.target.dataset.modalId;
        const modal = document.getElementById(modalId);
        if (modal) modal.style.display = 'block';
    }
    // 处理关闭按钮
    else if (event.target.classList.contains('close')) {
        const modalId = event.target.dataset.modalId;
        const modal = document.getElementById(modalId);
        if (modal) modal.style.display = 'none';
    }
    // 点击模态框外部关闭
    else if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
});

额外说明 #

• 确保模态框的CSS默认设置display: none，初始状态保持隐藏。
• 用data-*属性关联按钮与模态框，比纯索引类名更清晰规范，且避免了类名为纯数字的潜在问题。
• 事件委托的方式支持后续动态新增的卡片/模态框，无需重复绑定事件。

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