通过 MVC 局部视图注入时，Bootstrap 模态显示和隐藏事件未触发

Posted 2023-02-22

【中文标题】通过 MVC 局部视图注入时，Bootstrap 模态显示和隐藏事件未触发

【英文标题】：Bootstrap modal shown and hidden events not firing when injected via MVC partial view

【发布时间】：2017-01-11 21:36:42

【问题描述】：

在 ASP.NET MVC 5 中，我有一个 id #modal 的引导模式，当满足某些条件时（为简洁起见省略了条件），它会作为 view 的一部分加载。我在 js 文件中实现了 #modal 的 shown.bs.modal 和 hidden.bs.modal 函数：main.js

到目前为止一切顺利，一切正常。但是，在上述条件不满足的场景中，模态框通过 AJAX 调用注入到视图的 html 中，作为 部分视图 的一部分。模态与前面提到的完全一样（相同的#modal id，相同的一切）。但是，这一次 main.js 中的 shown.bs.modal 和 hidden.bs.modal 函数没有触发。这是为什么呢？

【问题讨论】：

你需要event delegation

【参考方案1】：

更改main.js 中的事件处理程序：

$('#modal').on('shown.bs.modal', function (e)  ... );
$('#modal').on('hidden.bs.modal', function (e)  ... );

到委托的事件处理程序：

$('body').on('shown.bs.modal', '#modal', function (e)  ... );
$('body').on('hidden.bs.modal', '#modal', function (e)  ... );

您可以将body 替换为包含#modal 的任何父容器。有关详细说明，请参阅@Stephen Muecke's comment 中的链接。