Laravel同页面按ID编辑数据：点击任务无法回显至输入框问题

问题根源 #

1. 重复ID导致事件绑定异常：所有任务触发按钮都使用了同一个id="show-task"，HTML要求ID必须唯一，jQuery通过ID选择器只会绑定最后一个元素，因此点击任何任务都会调用最后一条数据的接口。
2. 输入框未动态赋值：当前JS仅更新了<span>的文本内容，编辑区域的输入框仍保留页面渲染时的静态值（循环渲染场景下会被最后一项覆盖），没有将接口返回的动态数据同步到输入框。

具体修复步骤 #

1. 替换重复ID为类名

将任务触发按钮的id="show-task"改为类名class="show-task"（类支持重复使用）：

<a href="javascript:void(0)"
   class="show-task"
   onclick="showDiv('edittaskk')"
   data-url="{{ route('as.show', $as->id) }}">
    <span class="task-title">{{$as->title}}</span>
</a>

2. 修改JS事件绑定与输入框赋值逻辑

更新JS中的选择器，同时添加输入框动态赋值代码：

$(document).ready(function () {
    /* 点击任务展示编辑弹窗 */
    $('body').on('click', '.show-task', function () {
        var taskURL = $(this).data('url');
        $.get(taskURL, function (data) {
            $('#edittask').modal('show');
            // 更新文本显示区域
            $('#as-id').text(data.id);
            $('#as-title').text(data.title);
            $('#as-duedate').text(data.duedate);
            $('#as-status').text(data.status);
            $('#as-prio').text(data.prio);
            
            // 给输入框赋值，替换静态默认值
            $('input[name="title[]"]').val(data.title);
            $('input[name="duedate"]').val(data.duedate);
            // 如有其他输入框（如status、prio），按同样方式添加赋值代码
        })
    });
});

3. 额外检查项

• 确认as.show接口返回的data结构正确，包含id、title、duedate等字段，可在浏览器控制台的Network面板查看请求响应内容。
• 若无需提交数组格式数据，建议将输入框的name="title[]"改为name="title"，避免后续提交时出现数据格式问题。

内容的提问来源于stack exchange，提问作者Sergen Şahin