jQuery追加AJAX表格内联编辑行报缺失)语法错误如何修复

错误原因 #

报错是字符串拼接时的引号嵌套、变量插入逻辑错误导致的，问题集中在onBlur属性的updateValue参数拼接部分：
你将JS变量dt.personId直接写在双引号包裹的HTML字符串中，没有正确断开字符串做变量拼接，也没有给updateValue的第三个参数加必要的单引号包裹，最终生成的HTML代码语法错误，浏览器解析时就会报括号缺失的异常。

修复方案 #

方案1：修正普通字符串拼接逻辑 #

把dt.personId的拼接逻辑调整为和静态PHP渲染的格式完全一致即可：

success: function(data) {
    data.forEach(function(dt) {
        $("#tbody2").append(
            "<tr>"+ 
            " <td><div contenteditable=\"true\" onBlur=\"updateValue(this, 'lName', '" + dt.personId + "')\" onClick=\"activate(this)\">" + dt.lName + "</div></td>"   +
            "</tr>"); 
    });
}

方案2：用ES6模板字符串（更推荐，避免拼接坑） #

用反引号包裹的模板字符串不需要处理复杂的引号转义，直接用${变量名}插入值即可，基本不会出现引号嵌套错误：

success: function(data) {
    data.forEach(function(dt) {
        $("#tbody2").append(`
            <tr>
                <td>
                    <div contenteditable="true" onBlur="updateValue(this, 'lName', '${dt.personId}')" onClick="activate(this)">${dt.lName}</div>
                </td>
            </tr>
        `);
    });
}

额外优化建议 #

可以改用事件委托绑定事件，不需要在动态生成元素时写内联事件，从根源上避免引号拼接问题：

// 全局只绑定一次，对所有后续新增的元素都生效
$("#tbody2").on('blur', '[contenteditable=true]', function() {
    const field = $(this).data('field');
    const personId = $(this).data('person-id');
    updateValue(this, field, personId);
}).on('click', '[contenteditable=true]', function() {
    activate(this);
});

// 动态生成元素的代码可以简化为
success: function(data) {
    data.forEach(function(dt) {
        $("#tbody2").append(`
            <tr>
                <td>
                    <div contenteditable="true" data-field="lName" data-person-id="${dt.personId}">${dt.lName}</div>
                </td>
            </tr>
        `);
    });
}

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