ASP.NET MVC分部视图中Bootstrap Confirmation失效问题

这问题我之前在ASP.NET MVC项目里碰到过好几次，核心原因很明确：分部视图是动态加载到页面中的，而bootstrap.confirmation默认只会在页面首次加载时初始化已存在的DOM元素，后续新增的分部视图元素没被初始化，自然就无法触发确认框。

你现在的事件委托（$(document.body).on('confirmed.bs.confirmation', ...)）是对的——它能处理动态元素的触发事件，但前提是这些元素已经被bootstrap.confirmation初始化过了。下面是具体的解决步骤：

1. 抽离初始化逻辑为复用函数 #

把bootstrap.confirmation的初始化代码写成一个独立函数，方便在需要的时候调用：

function initDeleteConfirmations() {
    $('.deleteOrg').confirmation({
        container: 'body',
        placement: 'bottom',
        originalTitle: 'Delete organization',
        // 这里可以添加其他你需要的配置，比如btnOkClass、btnCancelClass等
    });
}

2. 页面初始加载时执行一次初始化 #

确保主页面加载完成后，先对已有的元素进行初始化：

$(document).ready(function() {
    // 初始化页面上原有的删除按钮
    initDeleteConfirmations();
});

3. 分部视图加载完成后重新初始化 #

这是最关键的一步！不管你是通过AJAX加载分部视图，还是用@Html.Partial动态渲染（比如在模态框里加载），都要在分部视图的DOM被插入到页面后，再次调用初始化函数：

示例1：AJAX加载分部视图的情况 #

// 假设你通过AJAX请求获取分部视图内容
$.ajax({
    url: '/Organization/LoadPartialView',
    type: 'GET',
    success: function(partialHtml) {
        // 把分部视图插入到页面容器中
        $('#partialViewContainer').html(partialHtml);
        // 对新插入的删除按钮初始化确认框
        initDeleteConfirmations();
    }
});

示例2：如果是通过服务器端渲染（比如在表单提交后返回分部视图） #

可以在分部视图的末尾添加一段脚本（不推荐全局混写，但应急可用）：

<!-- 分部视图内容 -->
<a class="tooltips deleteOrg" data-id="@organization.Id">
    <i class="fa fa-trash"></i>
</a>

<script>
    // 分部视图加载完成后初始化当前视图内的确认框
    initDeleteConfirmations();
</script>

额外优化建议 #

你可以把HTML里的重复配置（比如data-container、data-placement）移到JS的初始化函数里，这样HTML代码更简洁：

<!-- 优化后的HTML -->
<a class="tooltips deleteOrg" data-id="@organization.Id">
    <i class="fa fa-trash"></i>
</a>

这样处理后，分部视图里的删除按钮就能正常触发bootstrap.confirmation的确认框了，你的confirmed.bs.confirmation事件也能正常捕获到点击。

内容的提问来源于stack exchange，提问作者3 rules