javascript - jQuery .on ("change")运行越来越多次，但我只希望它运行一次

Question

我正在尝试检测输入文本字段的更改。每当用户更改输入中的某些内容时，我都想获取新值并验证它。我的问题是我正在使用的代码似乎每次运行的次数都越来越多。它将检测一次输入的更改。但是，下次更改一个输入时，代码将运行两次。然后三遍、四遍，以此类推。我到底做错了什么？

这是我的 HTML:

<div class="input-wrapper">
  <input name="clickthru1" type="text" value="input1">
  <input name="clickthru2" type="text" value="input2">
  <input name="clickthru3" type="text" value="input3">
</div>

这是我的 jQuery:

$( ".input-wrapper" ).on( "focus", "input", function() {

  console.log("focus on input detected");

    $( ".input-wrapper" ).on( "change", "input", function() {
      console.log("change to value detected");
    });

});

这里是代码笔的链接:http://codepen.io/jimmykup/pen/yYvbzK

Answer 1

这是因为每次触发焦点事件时，您都会添加“更改时”函数来堆栈。因此，只需将其置于焦点之外的功能即可。

$( ".input-wrapper" ).on( "focus", "input", function() {
  console.log("focus on input detected");
});

$( ".input-wrapper" ).on( "change", "input", function() {
  console.log("change to value detected");
});