jQuery .on（“ change”）运行越来越多，但我只希望它运行一次

Question

I'm trying to detect changes to input text fields. Whenever the user changes something in an input I want to grab the new value and validate it. My problem is that the code I'm using appears to be running more and more each time. It will detect a change to an input once. But then the next time one input is changed, the code will run twice. Then three times, four times, and so on. What is it that I'm doing wrong?

Here is my 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>

And here is my 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");
    });

});

And here is a link to the codepen: http://codepen.io/jimmykup/pen/yYvbzK

Answer 1

Move change event assignment outside of focus event:

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

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

Answer 2

That is because you add 'on change' function to stack each time focus event is fired. So just put it out of focus functionality.

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

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

Answer 3

Everytime you focus on the input, a new change event handler is added to it. So the first time you focus, you will get one console log, the second time you focus you will get 2 , then 3 and so on.

The solution is to remove the nesting you currently have to only have one function call for each type of event:

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

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