CODEWITHSUNDEEP
javascriptjqueryonchange
Marcin K
Marcin K

Reputation: 37

jQuery CSS on change works only on click?

My initial settings for 'buttons' that are created in function are like this.

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

HTML (simplified):

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

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

Next, function is simple :

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

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

What I want to achieve

After changing the value of input with class "input_w", css of ".save_w" should be changed.

What I get

When I change value of input, the ".save_w" changes, but only after I click somewhere on the site (usually I click on another elements to trigger change). Why? There is no onclick method here.

Upvotes: 1

Views: 113

Answers (3)

Yusuf Sanusi
Yusuf Sanusi

Reputation: 23

Changing event change to input is all you needed.

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

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

Upvotes: 1

Twisty
Twisty

Reputation: 30893

Here is another example that uses input and CSS to make the changes a bit easier.

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

Upvotes: 1

CherryDT
CherryDT

Reputation: 29052

The change event fires only after the change is committed by leaving the form field:

The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

[...]

  • When the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).

(Emphasis mine. - Source)

The input event may be more to your liking:

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.

[...]

Note: The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.

(Source)

Upvotes: 1

Related Questions