Laravel 6.x中Ajax加载模态框内jQuery x-editable无法生效问题求助

你遇到的问题本质是DOM动态渲染后未重新绑定x-editable初始化事件：
$(document).ready()执行时，模态框里的订阅者列表还没通过Ajax加载，此时选择器$('.xedit')只能匹配到页面初始渲染的静态元素，后续Ajax动态插入的.xedit元素没有被初始化，自然无法触发编辑功能。

解决步骤 #

步骤1：补充CSRF校验配置 #

首先在页面<head>标签内加入Laravel CSRF标识，避免提交请求时报419错误：

<meta name="csrf-token" content="{{ csrf_token() }}">

步骤2：调整JS逻辑，动态加载后初始化x-editable #

在Ajax请求success回调中完成表格行插入后，手动初始化新生成的x-editable元素，同时补充提交地址、请求方法等必填配置：

$('.openModal').on('click', function(){  
    var id = $(this).data('id');
    var table = $("#subscribers");
    table.html('');
    $.ajax({
        type: 'GET',
        url: '/participantes/' + id,
        success: function(data){
            $("#subscribersModal").modal("show");
            table.append('<tr><th>Nome</th><th>Email</th><th>Ações</th></tr>');
            // 销毁之前的xedit实例，避免重复初始化
            $('.xedit').editable('destroy');
            data.forEach(function(row){
                var isGenerated = row.certified_generated === 1 ? '<span class="badge badge-success">Gerado</span>' : '<span class="badge badge-danger">Não gerado</span>';
                var isValidated = row.already_validation_code !== null ? '<span class="badge badge-info">Validado</span>' : '<span class="badge badge-danger">Não validado</span>';
                var generateButton = row.certified_generated === 1 ?  '' : '<button class="btn generate-sub" title="Gerar certificado"><i class="fa fa-refresh" aria-hidden="true"></i></button>';
                var editUrl = '{{route("evento.update-participante", ":id") }}';
                editUrl = editUrl.replace(':id', row.id);
                // 给xedit元素补充data-name（要更新的字段名）、data-url（提交地址）属性
                table.append('<tr><td><a class="xedit" data-type="text" data-pk="'+ row.id + '" data-name="name" data-url="'+ editUrl +'" data-title="Edit">' + row.name + '</a><br>' + isGenerated +  isValidated + '</td><td>' + row.email + '</td><td>'+ '<a href="'+ editUrl +'" title="Editar registro"><i class="fa fa-pencil" aria-hidden="true"></i></a>' + generateButton + '</td></tr>');
            });
            // 动态内容插入完成后，初始化所有新的xedit元素
            $('.xedit').editable({
                mode: 'inline',
                method: 'PUT', // 匹配Laravel更新路由的请求方法
                ajaxOptions: {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                success: function(response, newValue) {
                    // 可自定义更新成功后的提示逻辑
                },
                error: function(response) {
                    // 可自定义更新失败的错误处理逻辑
                }
            });
        }
    })
});

原页面中document.ready里的x-editable初始化代码可以删除，避免重复绑定。

步骤3：适配后端接收逻辑 #

evento.update-participante路由对应的控制器方法，需要接收x-editable提交的三个核心参数完成更新：

• pk：订阅者主键ID
• name：要更新的字段名
• value：修改后的字段值

参考控制器代码：

public function updateParticipante(Request $request, $id)
{
    // 权限校验逻辑可自行补充
    $participante = \App\Participante::findOrFail($id);
    $participante->update([
        $request->input('name') => $request->input('value')
    ]);
    return response()->json(['status' => 'success']);
}

注意事项 #

• 确认evento.update-participante路由允许PUT请求，若不想修改请求方法，可将x-editable的method设为POST，同时在提交参数中加_method: 'PUT'适配Laravel的方法伪装规则。
• 如果后续需要扩展其他可编辑字段（比如邮箱），仅需要给对应元素加data-name属性指定字段名即可，无需修改初始化逻辑。

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