本文详细阐述了在使用Bootstrap 5构建表单提交成功提示时，Alert组件仅显示一次的原因及解决方案。核心在于理解data-bs-dismiss属性的行为，并将其替换为自定义的JavaScript函数来控制Alert的显示与隐藏，确保每次提交后都能正确触发提示，提升用户体验。
在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属性：
Thank you! We have received your message.
以及相应的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。
Thank you! We have received your message.
这里我们将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'; // 替换为你的实际URLconst form = document.forms['portofolio-contact-form'];const myAlert = document.querySelector('.my-alert'); // 使用更具体的类选择器确保选中正确的Alertconst 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'); // 可以考虑显示一个错误提示 });});// 自定义函数：隐藏Alertfunction 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交互问题的关键。
以上就是解决Bootstrap 5表单提交后提示框（Alert）仅显示一次的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580185.html
微信扫一扫 
支付宝扫一扫 
