jQuery绑定input的change事件时如何识别触发变更的目标输入框

实现方案 #

你可以直接通过jQuery事件回调的内置特性获取触发事件的对应输入框，有两种常用实现方式：

方式1：使用this关键字 #

jQuery事件回调中的this默认指向触发本次事件的原生DOM元素，你可以直接把它包装成jQuery对象使用：

$( ".inputForSum" ).change(function() {
  // this就是触发本次change事件的输入框原生DOM
  const currentInput = $(this); // 转成jQuery对象可以直接调用jQuery相关方法
  console.log("触发事件的输入框值：", currentInput.val());
  // 额外扩展：还可以获取输入框所在的表格行索引，方便定位位置
  console.log("输入框所在行索引：", currentInput.closest('tr').index());
});

方式2：使用事件对象参数 #

事件回调默认会接收事件对象参数，通过事件对象的target属性也可以拿到触发事件的元素：

$( ".inputForSum" ).change(function(event) {
  const currentInput = $(event.target);
  console.log("触发事件的输入框值：", currentInput.val());
});

原代码问题说明 #

你原来的写法$('.inputForSum').val()会选中页面上所有带inputForSum类的元素，调用val()时默认只会返回第一个匹配元素的值，自然无法拿到触发事件的对应输入框的值。

如果需要提前给每个输入框加唯一标识，你可以在HTML里给input加自定义属性：

<input class="text-center inputForSum" type="text" name="menge" value="1.00" data-input-id="1" />
<input class="text-center inputForSum" type="text" name="menge" value="1.00" data-input-id="2" />

之后在回调里直接读取即可：

console.log("输入框唯一标识：", currentInput.data('input-id'));

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