在web开发中，尤其是在处理表单提交这类异步操作时，我们经常需要向用户提供即时反馈，例如通过一个弹出提示框（alert）告知用户操作成功或失败。bootstrap 5提供了一个方便的alert组件，但开发者在使用时可能会遇到一个常见问题：表单提交成功后，alert提示框首次能够正常显示，但关闭后再次提交表单，alert却不再出现，除非刷新页面。
问题根源：data-bs-dismiss="alert" 的行为
这个问题的核心在于Bootstrap Alert组件的默认关闭行为。当一个Alert元素在其关闭按钮上带有data-bs-dismiss="alert"属性时，Bootstrap的JavaScript机制会在用户点击该关闭按钮后，将整个Alert元素从DOM结构中完全移除。这意味着，一旦Alert被关闭，它就不再存在于页面上，因此后续的JavaScript操作（例如移除d-none类来显示它）将无法找到该元素，导致Alert无法再次显示。
以下是原始的HTML结构示例，其中包含导致此问题的data-bs-dismiss属性：
<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert"> <strong>Thank you!</strong> We have received your message. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
以及相应的JavaScript代码片段，它尝试在表单提交成功后显示Alert：
const myAlert = document.querySelector('.alert');
// ... 其他代码 ...
form.addEventListener('submit', e => {
e.preventDefault();
// ... 显示加载状态 ...
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
// ... 隐藏加载状态 ...
myAlert.classList.toggle('d-none'); // 首次有效，之后无效
form.reset();
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});当Alert第一次显示并被用户点击关闭后，myAlert引用的DOM元素会被移除。再次提交表单时，myAlert.classList.toggle('d-none')操作将对一个不存在的元素执行，自然无法达到预期效果。
解决方案：自定义Alert的关闭逻辑
要解决此问题，我们需要改变Alert的关闭行为：不再让Bootstrap完全移除Alert元素，而是通过JavaScript手动控制其显示与隐藏状态。
1. 修改HTML结构
首先，从Alert的关闭按钮中移除data-bs-dismiss="alert"属性。取而代之，添加一个onclick事件，指向一个自定义的JavaScript函数，该函数将负责隐藏Alert。
<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert"> <strong>Thank you!</strong> We have received your message. <button type="button" class="btn-close" onclick="hideMyAlert()" aria-label="Close"></button> </div>
这里我们将onclick事件绑定到hideMyAlert()函数。
2. 调整JavaScript逻辑
接下来，我们需要在JavaScript中实现两个关键点：
- 在表单提交成功后，明确地移除d-none类来显示Alert。
- 实现hideMyAlert()函数，当用户点击关闭按钮时，该函数会重新添加d-none类来隐藏Alert，而不是将其从DOM中移除。
以下是完整的JavaScript代码示例：
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 使用更具体的类选择器确保选中正确的Alert
const btnKirim = document.querySelector('.my-btn');
const btnLoading = document.querySelector('.btn-loading');
// 表单提交事件监听器
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交行为
// 显示加载状态，隐藏提交按钮
btnLoading.classList.remove('d-none');
btnKirim.classList.add('d-none');
// 发送数据到Google Apps Script
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
// 隐藏加载状态，显示提交按钮
btnLoading.classList.add('d-none');
btnKirim.classList.remove('d-none');
// 移除 d-none 类以显示Alert
myAlert.classList.remove('d-none');
form.reset(); // 重置表单
console.log('Success!', response);
})
.catch(error => {
console.error('Error!', error.message);
// 错误时也要恢复按钮状态
btnLoading.classList.add('d-none');
btnKirim.classList.remove('d-none');
// 可以考虑显示一个错误提示
});
});
// 自定义函数：隐藏Alert
function hideMyAlert() {
myAlert.classList.add('d-none'); // 添加 d-none 类以隐藏Alert
}代码解释：
- 在fetch请求成功的回调中，我们使用myAlert.classList.remove('d-none')来确保Alert被显示。
- 我们定义了一个全局函数hideMyAlert()，它负责在用户点击Alert的关闭按钮时，通过myAlert.classList.add('d-none')来隐藏Alert。这样，Alert元素始终存在于DOM中，只是通过CSS的d-none类来控制其可见性。
注意事项与最佳实践
- 选择器精确性： 在document.querySelector('.my-alert')中，使用my-alert这个更具体的类名可以避免意外选中页面上其他Alert组件。
- 错误处理： 在catch块中，除了记录错误，还应该考虑向用户显示一个错误提示，并恢复表单按钮的状态，以提供更好的用户体验。
- 动画效果： Bootstrap的fade和show类仍然可以用于提供Alert的淡入淡出动画效果，即使我们自定义了关闭逻辑。
- 可访问性： aria-label="Close"属性对于屏幕阅读器用户至关重要，它提供了关闭按钮的语义描述。
- 模块化： 对于更复杂的应用，可以将hideMyAlert函数封装到更大的模块或类中，以保持代码的组织性。
总结
通过移除data-bs-dismiss="alert"属性并实现自定义的JavaScript函数来控制Alert的显示与隐藏，我们成功解决了Bootstrap Alert在表单提交后仅显示一次的问题。这种方法确保了Alert元素在DOM中的持久存在，从而可以在每次表单成功提交后重复使用，极大地提升了用户体验和界面的响应性。这种对组件底层行为的理解和定制是前端开发中解决特定UI交互问题的关键。
