AutoNumeric追加TextBox行时输入值重复显示问题

问题出在重复初始化已绑定AutoNumeric的输入框：

• 每次点击Add按钮追加新行后，使用的选择器input[name^=txtqty]、input[name^=txtamount]会匹配页面中所有名称符合前缀规则的输入框，包含之前行里已经完成AutoNumeric初始化的元素
• 同一个输入框被多次创建AutoNumeric实例时，会重复绑定输入事件，触发一次输入就会被多个实例同时执行赋值逻辑，直接导致值重复展示
• 追加第N行时，第1行的输入框会被初始化N次，第2行的被初始化N-1次，以此类推，第3行的输入框在第三次追加时刚好被绑定3套事件，输入1次5就会被连续赋值3次，最终显示555。

异常逻辑对应验证：追加第1行时所有输入框初始化1次，输入正常；追加第2行时第1行输入框被二次初始化，绑定2套输入事件，输入1次触发两次赋值，出现值重复；追加第3行时，第1行输入框被初始化3次、第2行2次、第3行1次，因此第三个输入框输入单次5会被连续赋值3次，最终显示555，与反馈现象完全一致。

原有HTML代码无需调整，每次追加新行后，仅对当前新添加的行内输入框做初始化，不要全量匹配所有历史输入框，从根源避免重复实例化。
修正后的JS实现代码：

var row = 1;
const autoNumericOptions = {
  allowDecimalPadding: "floats",
  decimalCharacter: ",",
  digitGroupSeparator: "",
  emptyInputBehavior: "zero",
  decimalPlaces: 2
};
function doAppendRow() {
  var output =
    "<div class='row' id='row_" +
    row +
    "'><div class='col-12'><div class='form-group'><label>Qty</label><input type='text' name='txtqty[]' class='form-control' /></div><div class='form-group'><label>Amount</label><input type='text' name='txtamount[]' class='form-control' /></div></div></div>";

  // 先将新行转为jQuery对象，限定元素查询范围
  const $newRow = $(output);
  $("#dvappend").append($newRow);
  // 仅初始化新行内的输入框，不影响历史已初始化元素
  AutoNumeric.multiple($newRow.find("input[name='txtqty[]']").get(), autoNumericOptions);
  AutoNumeric.multiple($newRow.find("input[name='txtamount[]']").get(), autoNumericOptions);
  row++;
}

如果后续代码迭代容易出现重复初始化场景，可以在初始化前增加判断，过滤掉已经被AutoNumeric托管的元素，代码如下：

// 筛选出未被AutoNumeric初始化的输入框
const unmanagedQtyInputs = $("input[name='txtqty[]']")
  .filter((_, el) => !AutoNumeric.isManagedByAutoNumeric(el))
  .get();
const unmanagedAmountInputs = $("input[name='txtamount[]']")
  .filter((_, el) => !AutoNumeric.isManagedByAutoNumeric(el))
  .get();

// 仅对未初始化的元素执行实例化
if (unmanagedQtyInputs.length) {
  AutoNumeric.multiple(unmanagedQtyInputs, autoNumericOptions);
}
if (unmanagedAmountInputs.length) {
  AutoNumeric.multiple(unmanagedAmountInputs, autoNumericOptions);
}

其中AutoNumeric.isManagedByAutoNumeric()是插件原生提供的方法，可以直接判断DOM元素是否已经绑定过AutoNumeric实例，从机制上避免重复绑定问题。

异常效果截图

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