Bootstrap 5.1模态框中addEventListener点击事件弹窗显示即触发的问题求助

你遇到的问题根源在于HTML中存在重复的id属性——页面顶部的“Show Modal”按钮和模态框里的“Apply”按钮都用了btnLoadList这个id，这违反了HTML规范（id必须是文档内唯一的）。

为什么事件会在打开模态框时触发？ #

当你用document.getElementById('btnLoadList')获取元素时，浏览器只会返回第一个匹配该id的元素，也就是页面顶部的那个打开模态框的按钮。所以你实际上是给“Show Modal”按钮绑定了click事件，当你点击它打开模态框的时候，这个事件就被触发了，控制台自然会打印on click event，而模态框里的Apply按钮根本没有绑定到这个事件。

解决步骤： #

1. 修改Apply按钮的id，给它一个唯一的标识，比如btnApply：

<button type="button" class="btn btn-primary" id="btnApply">Apply</button>

2. 更新JavaScript代码，获取新的id并绑定事件：

window.onload = function(){
    var btnApply = document.getElementById('btnApply');
    if(btnApply){
        btnApply.addEventListener('click', function(event){
            console.log("on click event");
            // 这里可以添加你需要的逻辑，比如处理表单数据
        });
    }
}

这样修改后，只有当你点击模态框里的“Apply”按钮时，才会触发对应的click事件，完全符合你的预期。

另外建议你在写HTML时始终保持id的唯一性，避免这类容易混淆的问题。

内容的提问来源于stack exchange，提问作者Hoa-NX