本教程旨在解决使用Bootstrap 5 Alert组件作为表单提交成功提示时，其只能显示一次的问题。核心原因在于Bootstrap的data-bs-dismiss属性会将Alert元素从DOM中移除。通过移除该属性，并结合自定义JavaScript函数来控制Alert的显示与隐藏，可以确保Alert在每次表单成功提交后都能正确弹出并可重复使用。
理解问题：Bootstrap Alert的默认行为
在web开发中，我们经常需要在用户完成某个操作（如表单提交）后提供即时反馈。bootstrap的alert组件是一个常用的选择，它提供了一种简洁美观的提示方式。然而，当开发者尝试将一个bootstrap alert用作可重复使用的成功提示（例如，每次表单提交成功后都显示一次），可能会遇到一个常见的问题：alert只显示一次，之后无论如何触发，它都不会再次出现，除非刷新页面。
这个问题的根源在于Bootstrap Alert的默认关闭机制。当Alert组件的关闭按钮（通常是一个带有data-bs-dismiss=”alert”属性的
以下是一个典型的初始HTML和JavaScript代码示例，展示了导致此问题的情况：
初始HTML (Alert组件):
感谢！ 您的消息已收到。
初始JavaScript (表单提交逻辑):
const scriptURL = 'https://script.google.com/macros/......'; // 您的Google Apps Script URLconst 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.toggle('d-none'); // 显示加载状态 btnKirim.classList.toggle('d-none'); // 隐藏提交按钮 fetch(scriptURL, { method: 'POST', body: new FormData(form) }) .then(response => { btnLoading.classList.toggle('d-none'); // 隐藏加载状态 btnKirim.classList.toggle('d-none'); // 显示提交按钮 myAlert.classList.toggle('d-none'); // 显示Alert (移除d-none) form.reset(); // 重置表单 console.log('Success!', response); }) .catch(error => console.error('Error!', error.message));});
在这段代码中，当表单成功提交后，myAlert.classList.toggle(‘d-none’)会移除d-none类，使Alert显示。然而，一旦用户点击Alert上的关闭按钮，由于data-bs-dismiss=”alert”的存在，Alert元素会被从DOM中移除，导致后续提交无法再次显示它。
解决方案：自定义Alert关闭行为
要解决这个问题，我们需要阻止Bootstrap的默认移除行为，转而使用自定义的JavaScript来控制Alert的显示和隐藏。核心思路是：
移除关闭按钮上的data-bs-dismiss=”alert”属性。为关闭按钮添加一个onclick事件，调用一个自定义函数。这个自定义函数负责在用户点击关闭按钮时，仅仅通过添加d-none类来隐藏Alert，而不是将其从DOM中移除。
下面是修改后的HTML和JavaScript代码：
修改后的HTML (Alert组件):
感谢！ 您的消息已收到。
修改后的JavaScript (表单提交及自定义关闭逻辑):
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 您的Google Apps Script URLconst 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.toggle('d-none'); btnKirim.classList.toggle('d-none'); fetch(scriptURL, { method: 'POST', body: new FormData(form) }) .then(response => { // 隐藏加载状态，显示提交按钮 btnLoading.classList.toggle('d-none'); btnKirim.classList.toggle('d-none'); // 移除 'd-none' 类来显示 Alert myAlert.classList.remove('d-none'); form.reset(); // 重置表单 console.log('Success!', response); }) .catch(error => console.error('Error!', error.message));});// 自定义函数：隐藏 Alertfunction hideMyAlert() { myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏 Alert}
关键改动解析
HTML中的Alert关闭按钮:
data-bs-dismiss=”alert” 被移除。这个属性是导致Alert元素被DOM移除的罪魁祸首。onclick=”hideMyAlert()” 被添加。现在，当用户点击关闭按钮时，会调用我们自定义的hideMyAlert JavaScript函数。
JavaScript中的表单提交成功处理:
myAlert.classList.remove(‘d-none’); 明确地移除了d-none类。这意味着每次表单成功提交后，Alert都会被显示出来。
新增的JavaScript函数 hideMyAlert():
function hideMyAlert() { myAlert.classList.add(‘d-none’); } 这个函数的作用是，当它被调用时，会给myAlert元素添加d-none类。d-none是Bootstrap提供的实用类，用于设置display: none !important;，从而隐藏元素。通过这种方式，Alert只是被隐藏，但仍然保留在DOM中，可以在下次需要时再次显示。
注意事项与最佳实践
DOM操作的粒度: 这种方法通过控制CSS类（d-none）来管理元素的可见性，而不是直接移除/添加元素，这是一种更高效且灵活的DOM操作方式。可访问性: 确保你的自定义关闭机制仍然能提供良好的可访问性。Bootstrap的data-bs-dismiss通常会处理焦点管理等问题。虽然我们的简单d-none切换可能不会自动处理这些，但对于简单的提示，通常影响不大。如果需要更高级的可访问性，可能需要手动管理焦点。错误处理: 教程中的fetch请求包含了.catch()块来处理网络或API错误。在实际应用中，当出现错误时，你可能需要显示一个不同的Alert（例如，一个红色的错误提示Alert），而不是成功的提示。CSS过渡效果: Bootstrap Alert默认带有fade show类，这提供了平滑的显示/隐藏过渡效果。我们的d-none切换会立即隐藏元素。如果希望保留过渡效果，可以考虑使用classList.remove(‘show’)和classList.add(‘show’)，并配合CSS的transition属性，或者手动触发Bootstrap的JS API（new bootstrap.Alert(myAlert).hide()），但这会引入更多复杂性，且仍需确保元素不被移除。对于本教程解决的“只显示一次”问题，上述解决方案已经足够。代码组织: 在大型项目中，建议将hideMyAlert这样的辅助函数封装到更模块化的结构中，例如一个表单处理模块。
通过上述修改，您的Bootstrap Alert组件将能够在每次表单成功提交后正确显示，并在用户点击关闭按钮后隐藏，而不会被从DOM中移除，从而实现可重复使用的提示功能。
以上就是解决Bootstrap Alert只显示一次问题的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580224.html
微信扫一扫 
支付宝扫一扫 
