Laravel中使用jQuery实现无模态值编辑及保存功能求助

1. 调整HTML结构（修复嵌套冲突+优化布局） #

原代码中按钮嵌套a标签会导致事件触发异常，先拆分元素并给核心元素添加标识，方便后续操作：

<p class="inn-admin-title" id="business-name-display">{{$users->buisness_name}}</p>
<div class="pencile-fpu">
    <button class="add-btn edit-btn" type="button">
        <img src="{{asset('assets/img/pencil.webp')}}">
    </button>
    <button class="save-change-b" style="display:none;">Save changes!</button>
</div>
<input class="semibh" type="text" id="business-name-input" value="{{$users->buisness_name}}" style="padding:0px;border:1px solid #fff;font-size:28px;font-family:AvenirHeavy;margin:0;display:none;box-sizing:border-box;background-color:transparent;color:white">

2. 实现前端交互逻辑 #

通过jQuery完成「编辑-保存」的状态切换，以及值的同步和后端保存：

$(document).ready(function() {
    // 点击编辑按钮，切换到编辑状态
    $(document).on('click','.edit-btn',function() {
        $('#business-name-display').hide();
        $('#business-name-input').show().focus();
        $('.save-change-b').show();
        $(this).hide();
    });

    // 点击保存按钮，同步值并切换回显示状态
    $(document).on('click','.save-change-b',function() {
        const newValue = $('#business-name-input').val().trim();
        if(newValue) {
            // 更新页面显示文本
            $('#business-name-display').text(newValue).show();
            // 切换控件状态
            $('#business-name-input').hide();
            $(this).hide();
            $('.edit-btn').show();

            // 提交新值到后端保存（适配Laravel环境）
            $.ajax({
                url: '/your-save-api', // 替换为你的后端保存接口地址
                method: 'POST',
                data: {
                    _token: '{{csrf_token()}}',
                    business_name: newValue,
                    user_id: '{{$users->id}}'
                },
                success: function() {
                    alert('修改已保存');
                },
                error: function() {
                    alert('保存失败，请重试');
                }
            });
        } else {
            alert('请输入有效的商家名称');
            $('#business-name-input').focus();
        }
    });
});

核心说明 #

• 将原隐藏的input从type="hidden"改为type="text"，默认隐藏，编辑时触发显示
• 拆分原按钮内的a标签为独立保存按钮，避免事件嵌套冲突
• 前端完成状态切换后，通过AJAX将新值提交到后端实现持久化

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