I have two input elements with class "inputWithLimit". Why would both be firing simultaneously and logging '0' as val().length?

Question

$(document).ready(function() {
    $(".inputWithLimit").each(() => {
        var inp = this;
        inp.addEventListener("input",
            function (event){
                console.log($(inp).val().length);
            });
    });
})

I've also tried "keyup" and "change" as event handlers, and in both other cases, jquery is doing a strange thing with assigning these listeners. Thanks.

Answer 1

If you are using jQuery then there is no need to loop through each element and add an event listener. An example which logs the value of each input when you input something.

$(document).ready(function() {
    $(".inputWithLimit").on('input',function() {
        console.log(this.value);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit">
<input class="inputWithLimit">

Answer 2

The problem is your arrow function. When using arrow function, then you can't use `this'

$(".inputWithLimit").on("input", function() {
  console.log($(this).val().length);
});

I've also made your code shorter.

Demo

$(document).ready(function() {
  $(".inputWithLimit").on("input", function() {
    console.log($(this).val().length);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit" />