更改时的jQuery CSS仅在单击时有效吗？

如何解决更改时的jQuery CSS仅在单击时有效吗？

我在函数中创建的“按钮”的初始设置是这样的。

$(".save_w").css("color","grey");
$(".save_w").css("pointer-events","none");

HTML（简体）：

<input class="input_w" type="text">

<i class="save_w far fa-save"></i>

接下来，功能很简单：

$('body').on('change','.input_w',function() {
  console.log("change");

  $(".save_w").css("pointer-events","auto");
  $(".save_w").attr("color","");
});

我想实现的目标

使用类"input_w"更改输入的值后，应更改".save_w"的css。

我得到的东西

当我更改输入的值时，".save_w"会更改，但是只有在我单击站点上的某个位置之后（通常是单击其他元素以触发更改）。为什么？这里没有onclick方法。

解决方法

change事件仅在通过离开表单字段提交更改后才触发：

当用户提交了对元素值的更改时，将为<input>，<select>和<textarea>元素触发change事件。与input事件不同，对于元素值的每次更改，不一定会触发 change事件。

根据更改的元素类型以及用户与元素交互的方式，change事件在不同的时刻触发：

[...]

当元素的值更改后但没有提交时（例如，在编辑<textarea>或<input type="text">的值之后失去焦点）。

（强调我的-Source）

您更喜欢input事件：

input，<input>或<select>元素的值被更改时，将触发<textarea>事件。

[...]

注意：每次元素值更改时都会触发输入事件。这与change事件不同，该事件仅在提交值时才触发，例如通过按Enter键，从选项列表中选择一个值等等。

（Source）

这是另一个使用input和CSS来简化更改的示例。

$(function() {
  $('body').on('input','.input_w',function() {
    if ($(this).val().length > 1) {
      $(".save_w").addClass("active");
    } else {
      $(".save_w").removeClass("active");
    }
  });
});

.save_w {
  color: gray;
  pointer-events: none;
}

.save_w.active {
  color: black;
  pointer-events: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input_w" type="text">

<i class="save_w far fa-save"></i>

只需将事件change更改为input。

$('body').on('input',function() {
  console.log("change");

  $(".save_w").css("pointer-events","auto");
  $(".save_w").attr("color","grey");
});