关闭特定模式后重新加载页面答案

【问题标题】：Reload page after a particular modal is closed关闭特定模式后重新加载页面
【发布时间】：2018-05-10 08:15:30
【问题描述】：

我在一个页面上有两个模态。我只想要一个在关闭后刷新父页面。但是，即使我添加代码来执行此操作，两种模式都会在关闭后刷新页面。知道为什么吗？

<script>
    $(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal');
    });
</script>

<script>
    $(document.body).on('hidden.bs.modal', function () {
    $('#myModal2').removeData('bs.modal');
    location.reload();
    });
</script>

模态 1 调用：

<a data-toggle="modal" data-target="#myModal" href="modal_target.cfm?M=#MLink#" class="btn btn-#bg_color#">#CP#</a>

模态2调用：

<a data-toggle="modal" data-target="#myModal2" href="modal_AmendCP.cfm?M=#MLink#" title="view details" class="btn btn-primary">#Measure#</a>

感谢您的帮助！

【问题讨论】：

Bind a function to Twitter Bootstrap Modal Close的可能重复

标签： javascript twitter-bootstrap modal-dialog

【解决方案1】：

您的两个函数都在$(document.body) 的同一个模态关闭事件上被触发。

您应该将其更改为仅在模态对象上触发：

<script>
    $('#myModal').on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal');
    });
</script>

<script>
    $('#myModal2').on('hidden.bs.modal', function () {
    $('#myModal2').removeData('bs.modal');
    location.reload();
    });
</script>

From the Bootstrap Documentation:

hidden.bs.modal：当模式对用户完成隐藏时触发此事件（将等待 CSS 转换完成）。

【讨论】：

【解决方案2】：

您应该选择确切的模式来添加事件侦听器。如果选择器是“document.body”，则两者都会触发事件。在您的代码中：为“hidden.bs.modal”调用的函数只是

function () {
$('#myModal2').removeData('bs.modal');
location.reload();
}

替换

function () {
$('#myModal').removeData('bs.modal');
}

因为它是稍后声明的。

【讨论】：