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");
    });

});

以下是codepen的链接：http://codepen.io/jimmykup/pen/yYvbzK

Answer 1

将change事件分配移至focus事件之外：

$( ".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

这是因为你在变化中添加＆＃39;每次触发焦点事件时堆叠的函数。所以只是把它放在焦点功能之外。

$( ".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

每当您专注于输入时，都会添加一个新的更改事件处理程序。因此，第一次聚焦时，您将获得一个控制台日志，第二次聚焦时您将得到2，然后是3，依此类推。

解决方案是删除当前的嵌套，只为每种类型的事件调用一个函数：

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

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

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

3 个答案: