Как я могу определить, когда входные значения меняются, используя Jquery

Question

Я не понимаю, почему это не работает, он должен печатать отладку с помощью console.log, и я пытался использовать метод изменения, также не работал.

Итак, я не могу найти способ исправить, как я могу решить эту проблему. Спасибо за вашу помощь.

$(document).ready(function() {
  $("[id^=item-]").on('input', function() {
    console.log(this.val())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

или

$(document).ready(function() {
   $("#item-1").on('input', function() {
    console.log(this.val())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

Answer 1

this в вашем обработчике событий - это элемент <input>, который вызвал событие.
.val() - это метод jQuery.

Любой перенос this в jQuery объект

$(this).val()

или использовать .value

this.value

$(document).ready(function() {
   $("#item-1").on('input', function() {
    console.log(this.value);
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

Answer 2

Вам либо нужно обернуть this в jQuery объект:

console.log($(this).val());

$(document).ready(function() {
  $("[id^=item-]").on('input', function() {
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">

или используйте this изначально и получите значение :

console.log(this.value);

$(document).ready(function() {
  $("[id^=item-]").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="input item-input" type="text" id="item-1" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-2" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-3" placeholder="จำนวน" value="">
<input class="input item-input" type="text" id="item-4" placeholder="จำนวน" value="">