Bootstrap模态框隐藏时清除内容的实现方案求助

看起来你代码里的核心问题是模态框隐藏事件绑定错了元素，另外还有一些小的语法和作用域细节需要调整，我来帮你一步步修正：

问题分析 #

1. hidden.bs.modal事件是触发在模态框本身（也就是你的#redditModal）上的，而不是触发点击的按钮.sn-reddit，你之前把事件绑到按钮上，自然不会生效。
2. 清空.modal-body时最好指定对应模态框的，避免影响页面上其他模态框。
3. 代码的语法结构需要调整，比如函数定义和事件绑定的顺序，避免作用域问题。

修正后的完整代码 #

// 先定义code函数
function code(e) {
  e.preventDefault();
  $(".socialnetworkcontent.form-control").append("test");
  $('#redditModal').modal('show');
}

// 绑定按钮点击事件
$(".sn-reddit").on("click", code);

// 绑定模态框隐藏事件到模态框本身
$("#redditModal").on("hidden.bs.modal", () => {
  // 清空当前模态框内的modal-body
  $("#redditModal .modal-body").html("");
});

关键调整点说明 #

• 事件绑定目标修正：把hidden.bs.modal事件绑定到#redditModal上，这是Bootstrap模态框事件的正确触发对象。
• 精准选择器：清空内容时用$("#redditModal .modal-body")而不是全局的.modal-body，防止误操作其他模态框的内容。
• 代码顺序优化：先定义函数再绑定事件，避免出现函数未定义的报错。

另外要确保你的Bootstrap JS脚本已经正确引入（要放在jQuery之后引入），这样整个逻辑就能正常运行了。

内容的提问来源于stack exchange，提问作者Carol.Kar