Laravel模态框异常：服务删改及内容展示仅首行数据生效

兄弟，这个问题我开发时也踩过坑！核心原因就是你在@foreach循环里给模态框或者触发按钮用了重复的固定ID，浏览器只会识别第一个匹配的元素，所以只有列表第一行的操作能正常触发，后面的行自然没响应。下面给你具体的解决步骤和代码示例：

1. 给每个模态框设置唯一ID #

在循环里利用每个$service的唯一标识（比如id）来区分模态框和触发按钮，确保每个元素的ID都是独一无二的。比如：

触发按钮示例 #

<!-- 删除按钮 -->
<a href="#delete-modal-{{ $service->id }}" class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red">
    <i class="material-icons">delete</i>
</a>

<!-- 更新按钮 -->
<a href="#update-modal-{{ $service->id }}" class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light blue">
    <i class="material-icons">edit</i>
</a>

对应模态框示例 #

<!-- 删除确认模态框 -->
<div id="delete-modal-{{ $service->id }}" class="modal">
    <div class="modal-content">
        <h4>确认删除服务</h4>
        <p>你确定要删除「{{ $service->name }}」吗？此操作不可撤销！</p>
    </div>
    <div class="modal-footer">
        <form action="{{ route('services.destroy', $service->id) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn red">确认删除</button>
            <a href="#!" class="modal-close btn grey">取消</a>
        </form>
    </div>
</div>

<!-- 更新服务模态框 -->
<div id="update-modal-{{ $service->id }}" class="modal">
    <div class="modal-content">
        <h4>更新服务信息</h4>
        <form action="{{ route('services.update', $service->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="input-field">
                <input id="service-name-{{ $service->id }}" type="text" name="name" value="{{ old('name', $service->name) }}">
                <label for="service-name-{{ $service->id }}">服务名称</label>
            </div>
            <!-- 其他需要更新的字段 -->
        </form>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn blue">保存更新</button>
        <a href="#!" class="modal-close btn grey">取消</a>
    </div>
</div>

2. 正确初始化模态框 #

如果使用的是Materialize这类UI框架，确保在DOM加载完成后初始化所有模态框，或者用事件委托的方式处理动态元素（如果列表是AJAX加载的）：

基础初始化（页面加载时渲染的列表） #

document.addEventListener('DOMContentLoaded', function() {
    // 初始化所有模态框
    const modals = document.querySelectorAll('.modal');
    M.Modal.init(modals);
});

事件委托方式（适合动态加载的列表） #

如果你的列表是通过AJAX异步加载的，直接初始化可能无法绑定新元素的事件，这时候用事件委托更稳妥：

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
        // 点击的元素是模态框触发按钮时
        if (e.target.closest('.modal-trigger')) {
            const trigger = e.target.closest('.modal-trigger');
            const modalId = trigger.getAttribute('href') || trigger.getAttribute('data-target');
            const modal = document.querySelector(modalId);
            
            if (modal) {
                // 初始化并打开模态框
                const modalInstance = M.Modal.init(modal);
                modalInstance.open();
            }
        }
    });
});

3. 关键检查点 #

• 确保触发按钮的href/data-target和模态框的id完全匹配，没有拼写错误
• 确认模态框的id确实包含{{ $service->id }}，保证唯一性
• 表单的action属性正确传递了当前$service的ID，确保路由能定位到对应的资源

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