循环课程数据传递至jQuery Ajax模态框时重复获取首个ID的问题求助

这个问题我之前也碰到过，核心原因是你用$('.add_video').attr('data-id')的时候，jQuery会直接返回第一个匹配到的元素的属性值——不管你点击的是哪门课程的按钮，提交表单时都会默认取第一个课程的ID。另外先提个关键细节：你的PHP按钮代码里漏了echo，这样页面上的按钮其实没有正确渲染出lesson的ID，得先把这部分修正：

<!-- 修正后的按钮代码，加上echo输出ID -->
<a class="btn btn-info add_video" data-id="<?php echo $lesson->id; ?>" data-toggle="modal" data-target="#myModal">Add Video</a>

接下来给你两个靠谱的解决方案，推荐用第一种，适配Bootstrap模态框的原生事件，逻辑更清晰：

方案一：利用模态框显示事件存储当前Lesson ID #

这种方法的思路是：当模态框被打开时，先把触发它的那个按钮的data-id存到表单的隐藏字段里，提交表单时直接从这个隐藏字段取值。

1. 在你的#add_video_form表单里添加一个隐藏输入框，用来临时存储当前Lesson ID：

<form id="add_video_form">
    <!-- 其他表单字段 -->
    <input type="hidden" id="current_lesson_id" name="lesson_id">
    <!-- 提交按钮等 -->
</form>

2. 修改你的jQuery代码，监听模态框的show.bs.modal事件（Bootstrap模态框的原生事件），把触发按钮的ID赋值给隐藏字段；提交表单时从隐藏字段取值：

$(document).ready(function(){
    // 监听模态框显示事件，获取触发按钮的ID
    $('#myModal').on('show.bs.modal', function (event) {
        // 获取触发模态框的那个按钮
        const triggerBtn = $(event.relatedTarget);
        // 从按钮的data-id属性里拿到Lesson ID
        const lessonId = triggerBtn.data('id');
        // 将ID赋值给隐藏字段
        $('#current_lesson_id').val(lessonId);
    });

    // 监听表单提交事件
    $('#add_video_form').on('submit', function(event){
        event.preventDefault();
        // 从隐藏字段获取当前选中的Lesson ID
        const lessonId = $('#current_lesson_id').val();
        alert(lessonId);
        // 这里可以继续写你的表单提交逻辑，比如AJAX请求等
    });
});

方案二：直接绑定按钮点击事件存储ID #

如果不想用模态框的原生事件，也可以给每个add_video按钮绑定点击事件，把当前按钮的ID存在一个变量里，提交表单时读取这个变量：

$(document).ready(function(){
    let currentLessonId = '';

    // 给每个Add Video按钮绑定点击事件
    $('.add_video').on('click', function(){
        currentLessonId = $(this).data('id');
    });

    $('#add_video_form').on('submit', function(event){
        event.preventDefault();
        alert(currentLessonId);
        // 后续提交逻辑
    });
});

两种方法都能解决问题，方案一更贴合Bootstrap模态框的使用逻辑，也避免了全局变量的潜在问题，更推荐使用。

内容的提问来源于stack exchange，提问作者Abdifatah Abdilahi