如何用jQuery统一监听多个输入框的input事件并调用同一函数？

你有四个结构相似的输入框，目前通过逐个绑定input事件的方式处理，想要改成统一调用一个函数并获取触发事件的输入框ID，可以用以下几种方式实现：

方式一：通过共同特征选择器批量绑定 #

观察你的输入框，它们的name属性都是code，可以直接用这个属性选择器选中所有目标输入框，绑定同一个事件处理函数：

$('input[name="code"]').on('input', function() {
    const inputId = this.id;
    console.log(`this is ${inputId}`);
});

在函数里，this指向当前触发输入事件的输入框元素，通过this.id就能拿到对应的ID，无需为每个输入框单独写逻辑。

方式二：事件委托（适合动态添加的输入框） #

如果后续可能会动态新增同类型的输入框，推荐用事件委托的方式，把事件绑定到它们的父元素上（假设这些输入框的父容器ID为code-container）：

$('#code-container').on('input', 'input[name="code"]', function() {
    const inputId = this.id;
    console.log(`this is ${inputId}`);
});

这种方式利用事件冒泡机制，父元素监听事件，只有当事件源是匹配的输入框时才执行处理函数，新增的输入框也会自动生效，不需要重新绑定事件。

方式三：提取独立处理函数 #

如果处理逻辑比较复杂，还可以把逻辑提取成单独的函数，再绑定到事件上：

// 定义独立的处理函数
function handleInputEvent() {
    const inputId = this.id;
    console.log(`this is ${inputId}`);
    // 这里可以添加更多处理逻辑
}

// 绑定到所有目标输入框
$('input[name="code"]').on('input', handleInputEvent);

这种方式让代码结构更清晰，后续修改处理逻辑时只需修改这个函数即可。

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