DataTables表格排序分页后，函数接收的参数为何变成完整input元素？

问题根因 #

这个异常是两个原因共同导致的：

1. 内联点击事件的参数没有加引号包裹：你当前的按钮代码渲染后，会生成onclick="addItemAndQuantity(你的物料编号)"的格式，没有给物料编号加引号，浏览器会把它识别为变量名而非字符串。而浏览器原生有个特性：所有设置了id属性的DOM元素，会自动作为同名变量挂载到window全局对象下，所以此时你的入参就变成了id为对应物料编号的input元素。
2. DataTables的重绘机制触发了异常：初始状态下如果你的物料编号是纯数字，无引号的纯数字会被识别为数值类型，getElementById会自动把数值转为字符串，所以能正常运行。但当你做排序、分页、筛选操作时，DataTables会删除原有DOM节点，重新生成当前页的DOM节点，此时全局变量绑定逻辑触发，就会把参数解析为DOM元素。

解决方案 #

快速修复方案 #

直接给内联事件的参数加上单引号，强制作为字符串传入：

<button type="button" class="btn hsa-btn-primary" onclick="addItemAndQuantity('@listItem.ItemNumber')">Add</button>

更稳定的推荐方案 #

不要使用内联onclick事件，改用事件委托绑定点击事件，彻底避免DataTables重绘导致的事件异常、参数解析异常问题：

1. 修改按钮代码，移除onclick，新增自定义属性存储物料编号：

<button type="button" class="btn hsa-btn-primary" data-item-number="@listItem.ItemNumber">Add</button>

2. 新增事件委托绑定逻辑（DataTables依赖jQuery，可直接使用）：

$('#dataTableAddItemToOrder').on('click', '.hsa-btn-primary', function() {
  const itemNumber = $(this).data('item-number');
  addItemAndQuantity(itemNumber);
});

额外优化建议 #

不建议直接用物料编号作为input元素的id，若物料编号包含特殊符号、或存在重复值时会引发异常，可以改为给input添加自定义属性：

<input type="text" data-item-number="@listItem.ItemNumber" name="itemQuantity" placeholder="0" class="form-control w80" autocomplete="off" />

取值时用属性选择器查找：

function addItemAndQuantity(itemNumber) {
  let input = document.querySelector(`input[data-item-number="${itemNumber}"]`);
  // 后续逻辑
}

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