修改Bootstrap 5模型内容，关闭并重新打开

Question

我有一个使用 Bootstrap 5 框架的模式。 我将其中包含的表单发布到 JQuery ajax 调用，然后根据 JQuery AJax 调用的结果修改模式内容，然后允许用户关闭它。

我使用模式中的三个 div 更新内容 - “错误”、“内容”和“成功”。 JQuery .hide() 和 .show() 取决于 JQuery Ajax Post 的结果。

更新一些帐户设置和AJax帖子的目的是更新数据库。

如果他们想再次修改设置，当他们单击“设置”时，模态仍然包含“成功”或“错误”结果，而不是原始模态内容（或他们选择的更新设置）。也许，更好的方法是拥有一个“标准”模态，当单击 Ajax 的设置以获取模态的初始内容时，将其加载到模态中。

看起来我可以触发一些 BS5 事件来将模态恢复到默认状态，但是，我很好奇这是否是执行此操作的最佳方法或者是否有更好的方法，或者我的其他想法是否是更好了。

Answer 1

点击关闭按钮时重置模型即可解决：

$('#yourModalID').on('hidden.bs.modal', function () {
    $(this).find('#error, #success').hide(); 
    $(this).find('#content').show(); 
    $(this).find('form')[0].reset();
});

#yourModalID = 添加您的模型 ID