点击addRow时重新初始化Ajax结果的问题求助

核心问题分析 #

1. 重复ID冲突：原代码中<select>使用了固定ID（club_activity_id、schedules），动态新增行时会复制这些ID，而HTML中ID必须唯一，导致JS只能定位到第一个行的元素，新增行的控件无法响应事件或被更新。
2. 静态事件绑定失效：原事件直接绑定在固定ID元素上，动态生成的新元素不会自动继承这些事件监听。
3. 新增行内容未重置：直接复制上一行HTML会继承其选中状态和内容，导致新增行和上一行内容一致。

修改后的完整代码 #

Blade HTML部分

<div class="form-group">
    <label class="form-label" for="student_id">{{ trans('cruds.clubRegistration.fields.student') }}</label>
    <select class="form-control select2" name="student_id" id="student_id">
        @foreach($students as $id => $entry)
            <option value="{{ $id }}" {{ old('student_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
        @endforeach
    </select>
</div>

<table class="table w-full" id="products_table">
    <thead>
        <tr>
            <th>
                {{ trans('cruds.clubRegistrationDetail.fields.club_activity') }}
            </th>
            <th>
                {{ trans('cruds.clubRegistrationDetail.fields.schedules') }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="product-row">
            <td>
                <select class="form-control select2 club_activity" name="club_activity[]">
                    <option>---  Select the activities ---</option>
                </select>
            </td>
            <td>
                <select class="form-control select2 schedules" name="schedules[]" multiple>
                    <option>---  Select the schedules ---</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
<div class="row">
    <div class="col-md-12">
        <button id="add_row" class="btn btn-default pull-left">+ Add Row</button>
        <button id='delete_row' class="pull-right btn btn-danger">- Delete Row</button>
    </div>
</div>

JavaScript部分

<script>
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // 初始化所有select2控件
        $('.select2').select2();

        // 新增行逻辑
        $("#add_row").click(function(e){
            e.preventDefault();
            // 克隆模板行，重置选中状态
            const newRow = $('.product-row:first').clone();
            // 清空select的选中值，重置为默认选项
            newRow.find('.club_activity').val('').trigger('change');
            newRow.find('.schedules').val('').trigger('change');
            // 添加到表格
            $('#products_table tbody').append(newRow);
            // 重新初始化新行的select2
            newRow.find('.select2').select2();
        });

        // 删除行逻辑
        $("#delete_row").click(function(e){
            e.preventDefault();
            const rows = $('.product-row');
            if(rows.length > 1){
                rows.last().remove();
            }
        });

        // 学生切换：更新所有行的活动列表
        $('#student_id').on('change', function(){
            var studentID = $(this).val();

            $.ajax({
                type: "GET",
                url: "/getClubsbyStudentGrade/" + studentID,
                dataType: 'json',
                success: function(dataD){
                    var options = "<option>---  Select the activities ---</option>";
                    $.each(dataD, function (key,value){
                        options += '<option value="'+ key +'">' + value + '</option>';
                    });
                    // 更新所有活动下拉框
                    $(".club_activity").html(options).trigger('change');
                },
                error:function(err){
                    alert("Student is not enrolled in current school year");
                }
            });
        });

        // 活动切换：使用事件委托监听动态生成的元素
        $('#products_table').on('change', '.club_activity', function(){
            var selD = $(this).val();
            // 获取当前行对应的 schedules 控件
            const $schedules = $(this).closest('.product-row').find('.schedules');

            $.ajax({
                type: "GET",
                url: "/getClubSchedules/" + selD,
                datatype: 'json',
                success: function(data){
                    var options = "<option>---  Select the schedules ---</option>";
                    $.each(data, function (key, value){
                        options += "<option value='" + key + "'>" + value + "</option>";
                    });
                    $schedules.html(options).trigger('change');
                }
            });
        });
    });
</script>

关键修改点说明 #

1. 移除固定ID，改用类名：将club_activity_id改为club_activity类，schedules改为schedules类，避免ID重复问题。
2. 事件委托绑定：对.club_activity的事件绑定改为委托到表格#products_table上，确保动态生成的元素也能触发事件。
3. 新增行重置内容：克隆行后清空select的选中值，避免继承上一行的内容。
4. 重新初始化select2：动态新增的select需要重新调用select2()初始化，否则样式和功能异常。
5. 批量更新活动列表：学生切换时，更新所有行的.club_activity控件，而不是仅第一个。
6. 关联行内控件：活动切换时，通过closest('.product-row')找到当前行对应的schedules控件，确保每个行的活动和日程一一对应。

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