多条相同input 输入框 jquery 失去焦点事件如何获取？

Question

比如下面是循环生成的三条相同的input 输入框 jquery 如何 获取他们的失焦点事件 下面三条数据 id 相同

<input type="text" name="" value="{$data.price}" style="width:40px">
<input type="text" name="" value="{$data.price}" style="width:40px">
<input type="text" name="" value="{$data.price}" style="width:40px">

Answer 1

$('.类选择器').on('blur', function() {
    // 获取失去焦点的输入框的值
    var value = $(this).val();
    
    // 在控制台打印值
    console.log(value);
  });

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

最好的方式是在它们的公共父元素侦听 focusout 事件，然后使用 event.target 访问具体的 input。

// 假设叫这个名字
$('.input-parent').on('focusout', function (event) {
  console.log(event.target);
});

Answer 3

focusout 是支持冒泡的。所以你可以用事件委托，直接绑在共同的父级上。

blur 是不支持冒泡的，所以必须先有 dom，然后针对 input 绑定事件。

---

你为了区分可以再 parentNode 里面 findIndex 一下，然后会有一个下标。

也可以判断当前 input 是否有 data-id，有的话就读，没有的话就给个 uuid，这样也可以标识出来。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

可以使用 jQuery 的事件委托机制。然后，使用 jQuery 为这些输入框添加失去焦点事件：

$(document).ready(function () {
  // 使用事件委托为具有相同类的所有输入框绑定失去焦点事件
  $('body').on('blur', '.price-input', function () {
    // 获取当前失去焦点的输入框的值
    var inputValue = $(this).val();
    console.log('失去焦点的输入框的值:', inputValue);
    // 在这里处理其他逻辑
  });
});

这段代码首先在页面加载完成后，使用事件委托为具有 price-input 类的所有输入框绑定失去焦点事件。当某个输入框失去焦点时，事件处理函数将获取该输入框的值，并在控制台输出。

请注意，这里的事件委托是将事件绑定到 body 元素上。实际应用中，您可以将事件绑定到一个更具体的父元素上，以提高性能。