jQuery表格添加行功能失效，报Uncaught ReferenceError错误

看起来你遇到了Uncaught ReferenceError，这通常意味着浏览器找不到你调用的addItem函数，我来帮你排查和解决这个问题：

常见原因及解决方案 #

1. 函数作用域问题（最可能的原因） #

如果你的addItem函数是放在类似$(document).ready()这样的局部作用域里，比如：

$(document).ready(function() {
    function addItem(id, name){ 
        bootbox.confirm("Are you sure?", function(result) { 
            if (result) { 
                $('#ingredients_table').append("<tr><td>"+name+"</td></tr>"); 
            } 
        }); 
    }
});

那浏览器在全局作用域里是找不到这个函数的——因为内联onclick事件会在全局作用域查找函数。

解决办法：

• 把addItem函数移到全局作用域（不要放在任何闭包/回调函数里）；
• 或者手动把函数挂载到window对象上，让它成为全局函数：

$(document).ready(function() {
    window.addItem = function(id, name){ 
        bootbox.confirm("Are you sure?", function(result) { 
            if (result) { 
                $('#ingredients_table').append("<tr><td>"+name+"</td></tr>"); 
            } 
        }); 
    }
});

2. 调用代码未正确绑定点击事件 #

从你给出的PHP代码来看，<tr>标签里没有添加调用addItem的触发逻辑（比如onclick属性），浏览器不知道什么时候调用这个函数。

修正后的PHP代码：

<?php foreach($inventory as $row): ?>
<tr style="cursor: pointer;" data-toggle="tooltip" data-placement="top" title="Add ingredient..." onclick="addItem(<?=htmlspecialchars($row['id'])?>, '<?=htmlspecialchars(addslashes($row['name']))?>')">
    <!-- 这里添加你的<td>内容 -->
</tr>
<?php endforeach; ?>

这里用htmlspecialchars和addslashes是为了避免name里的引号、特殊字符破坏JS语法，同时防止XSS风险。

3. 更优雅的方案：使用事件委托（推荐） #

内联事件和全局函数容易导致作用域问题和代码混乱，更推荐用事件委托的方式绑定点击事件：

JS代码：

// 给库存表格的tr绑定点击事件（假设你的库存表格id是inventory_table）
$(document).on('click', '#inventory_table tr', function() {
    // 从data属性里获取id和name
    const itemId = $(this).data('id');
    const itemName = $(this).data('name');
    
    bootbox.confirm("Are you sure?", function(result) {
        if (result) {
            // 用模板字符串拼接，可读性更好
            $('#ingredients_table').append(`<tr><td>${itemName}</td></tr>`);
        }
    });
});

PHP代码：

<?php foreach($inventory as $row): ?>
<tr style="cursor: pointer;" data-toggle="tooltip" data-placement="top" title="Add ingredient..." data-id="<?=htmlspecialchars($row['id'])?>" data-name="<?=htmlspecialchars($row['name'])?>">
    <!-- 这里添加你的<td>内容 -->
</tr>
<?php endforeach; ?>

这种方式不需要全局函数，也避免了内联事件的语法问题，代码更整洁易维护。

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