精通Bootstrap模态框：解决一次性打开与动态内容加载问题

<div class="row study-grid-row jsTableRow" id="@item.Id">
    <!-- ... 其他列内容 ... -->
</div>

$(document).ready(function () {
    // 模态框关闭事件处理：仅清空内容，通常无需 removeData
    $('#editStudyModal').on('hidden.bs.modal', function () {
        // 如果模态框的HTML结构是静态的，只更新其内容，通常无需调用 removeData('bs.modal')。
        // 只有当模态框本身被动态移除并重新添加时，才可能需要。
        // $(this).removeData('bs.modal'); 
        $('#editStudyModal .modal-body').html(''); // 清空模态框内容，避免显示旧数据
    });

    // 使用事件委托处理双击事件
    // '.rows-container' 是包含动态生成行的静态父元素
    $('.rows-container').on('dblclick', '.jsTableRow', function () {
        // 在事件委托中，`this` 正确指向被双击的 `.jsTableRow` 元素
        var studyId = $(this).attr('id'); 
        var url = '@Url.Action("Details", "Studies")'; // 确保URL正确

        // 立即显示模态框并显示加载指示器，提升用户体验
        $('#editStudyModal .modal-body').html('<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">加载中...</span></div></div>');
        $('#editStudyModal').modal("show"); 

        // 发送 AJAX 请求加载模态框内容
        $.ajax({
            url: url,
            type: 'post',
            data: { "id": studyId }, // 传递正确的ID
            success: function (data) {
                // 假设 'data' 包含用于模态框body的HTML内容
                $('#editStudyModal .modal-body').html(data);
            },
            error: function(xhr, status, error) {
                // 处理错误情况，在模态框中显示错误信息
                $('#editStudyModal .modal-body').html('<p class="text-danger">加载失败：' + error + '</p>');
                console.error("AJAX Error: ", status, error, xhr);
            }
        });
    });
});

<div class="modal fade" id="editStudyModal" tabindex="-1" role="dialog" aria-labelledby="editStudyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editStudyModalLabel">编辑学习项目</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 模态框内容将在此处通过AJAX加载 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <!-- 其他操作按钮 -->
      </div>
    </div>
  </div>
</div>