点击Datatable行编辑按钮传值到Bootstrap Modal不生效问题求助

架构老林

2026-10-6

问题排查及修复方案

核心错误点

JS事件参数调用错误：事件回调函数形参定义为e，但代码中错误使用了全局event对象获取触发源，部分浏览器下全局event对象不存在导致取值失败
自定义属性未加引号：PHP输出data-val属性时未给属性值加引号，若图片路径包含空格、特殊字符会导致属性截断，取值异常
事件绑定时机错误：未等待DOM加载完成就绑定事件，若JS代码放在页面头部，会出现找不到#editModal元素的问题

修复代码

1. 修正JS代码

$(document).ready(function () {
  $('#editModal').on('show.bs.modal', function (e) {
    // 用回调形参e获取触发模态框的元素
    const oldImageValue = $(e.relatedTarget).data('val');
    // 直接用ID选择器定位输入框，简化写法
    $('#oldImageName').val(oldImageValue);
  })
})

2. 修正PHP输出的编辑按钮代码

给data-val属性值添加单引号包裹：

echo "  <td>
            <a href='#' class='btn btn-info btn-circle' data-toggle='modal' data-target='#editModal' data-val='".$imagesPath[$imageId]."'>
                <i class='fas fa-edit'></i>
            </a>
            <a href='#' class='btn btn-danger btn-circle'>
                <i class='fas fa-trash'></i>
            </a>
        </td>";