Bootstrap Modal双击仅首次打开，关闭后无法再次唤起求助

在主视图中渲染了包含Bootstrap网格的局部视图，双击网格行预期打开编辑Modal，但首次打开后，关闭Modal再双击无法唤起，仅刷新页面后才能再次打开。

局部视图代码 #

<div class="study-container">
<div class="row no-gutters study-grid-header">
    <div class="col-3 header-icon-hover header-icon-ws" id="col0" onclick="sortTable(0)">&nbsp;Study Name</div>
    <div class="col-1 header-icon-hover d-flex justify-content-center" id="col1" onclick="sortTable(1)">Count</div>
    <div class="col-1" id="col2" onclick="sortTable(0)">Type</div>
    <div class="col-3 d-flex justify-content-left" id="col3" onclick="sortTable(1)" style="font-weight:normal">Comment</div>
    <div class="col-2 d-flex justify-content-center" id="col4" onclick="sortTable(0)">Start Date</div>
    <div class="col-2 d-flex justify-content-center" id="col5" onclick="sortTable(0)">End Date</div>
</div>
<div class="rows-container">
@foreach (var item in Model)
    {
        <div class="row study-grid-row jsTableRow" id="@item.Id" ondblclick="openEditStudyModal(@item.Id)">
        <div class="col-3">&nbsp;@item.Name</div>
        <div class="col-1 d-flex justify-content-center">@item.SubjectCount</div>
        <div class="col-1">@item.StudyTypeID</div>
        <div class="col-3">@item.Comment</div>
        <div class="col-2 d-flex justify-content-center">@item.StartUtc.ToString("yyyy-mm-dd")</div>
        <div class="col-2 d-flex justify-content-center">@item.EndUtc.ToString("yyyy-mm-dd")</div>
        </div>
    }
</div>

jQuery/AJAX代码 #

$(document).ready(function () {
        $('#editStudyModal').on('hidden.bs.modal', function () {
            $(this).removeData('bs.modal');
            $('#editStudyModal .modal-body').html('');
        });

        function openEditStudyModal(id) {
            var id = $(this).attr('id');
            var url = '@Url.Action("Details","Studies")';
            $.ajax({
                url: url,
                type: 'post',
                data: { "id": id },
                success: function (data) {
                    $('#editStudyPopup').html(data);
                    $('#editStudyModal').modal("show");
                }
            });
        });
    });

1. 参数覆盖与this指向错误 #

openEditStudyModal函数接收了传入的id参数，但函数内部又重新声明var id = $(this).attr('id');——通过行内ondblclick调用函数时，$(this)指向的是window对象而非当前行，导致获取的id为undefined，AJAX请求传参错误，无法加载Modal内容。

同时原代码存在语法错误：openEditStudyModal函数后多了一个});，导致函数未被正确定义在ready回调内，直接阻断后续代码执行。

2. Modal状态清理过度 #

hidden.bs.modal事件中调用$(this).removeData('bs.modal');会清除Bootstrap Modal的内部状态，导致后续无法正常初始化Modal，无需手动移除该数据。

修复后的代码 #

修正后的JavaScript代码

$(document).ready(function () {
    // Modal关闭后仅清空内容，保留内部状态
    $('#editStudyModal').on('hidden.bs.modal', function () {
        $('#editStudyModal .modal-body').html('');
    });

    // 将函数挂载到window，确保行内调用可访问
    window.openEditStudyModal = function(id) {
        var url = '@Url.Action("Details","Studies")';
        $.ajax({
            url: url,
            type: 'post',
            data: { "id": id },
            success: function (data) {
                $('#editStudyPopup').html(data);
                $('#editStudyModal').modal("show");
            },
            // 增加错误日志，方便排查问题
            error: function(xhr, status, error) {
                console.error('加载编辑内容失败:', error);
            }
        });
    };
});

优化建议：替换行内事件绑定

避免全局函数污染，改用jQuery绑定双击事件，确保this指向正确：

// 在ready回调内添加事件绑定，移除行内ondblclick属性
$('.jsTableRow').on('dblclick', function() {
    var id = $(this).attr('id');
    window.openEditStudyModal(id);
});

对应的局部视图修改：

<div class="row study-grid-row jsTableRow" id="@item.Id">

内容的提问来源于stack exchange，提问作者A Cameron