我如何使用 Jquery 检测输入值何时发生变化

Question

I don't understand why it doesn't work, It should print debug by console.log and i tried to use on change method also didn't work.

So, i can't find the way to fix, How i can solve this problem. Thank you for your help.

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

or

 $(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 in your event handler is the <input> element that triggered the event.
.val() is a jQuery method.

Either wrap this in a jQuery object

$(this).val()

Or use .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

You either need to wrap this in a jQuery object:

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="">

or use this natively and grab the value :

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="">