inputタグのタイプがnumberのときjsのchange()が機能しない

前提・実現したいこと

ボタンを押すと、inputタグのvalueが増えて、console.log('aaa');までの処理を流したい

今の状態だとinputのvalueが変わるだけでchangeメソッドが発火しないです。
明示的にchangeを書く必要があるのですが、どのようにすればよいかわかりません。
https://www.sejuku.net/blog/41231

該当のソースコード

javascript
1function addBranch() {
2	const dom = document.getElementById("num");
3	let num = document.getElementById("num").value;
4
5	dom.value++;
6}
7
8$(function () {
9	$('#num').change(function () {
10		let num = document.getElementById("num").value;
11		console.log('aaa');
12	})
13})

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="./style.css">
6    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
7    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
8    <script src="./app.js"></script>
9</head>
10<body>
11
12<canvas id="canvas"></canvas>
13<button id="button" onclick="addBranch()">ぷらす</button>
14<input id="num" type="number">
15
16</body>

行動規範の内容に同意します

回答3件

今の状態だとinputのvalueが変わるだけでchangeメソッドが発火しないです。

はい、changeイベントは、ユーザーが変更した場合のみ発生します。

jQueryを使うのであれば、$('#num').change()でイベントを実行できます。

投稿2021/03/09 07:59

maisumakun

総合スコア145973

明示的にchangeイベントをトリガーするので正解です。プログラムから値を変更した場合、自動的にchangeイベントが起きることはありません。

投稿2021/03/09 07:59

int32_t

総合スコア21679

全体的に中途半端ですね

javascript
1<script>
2$(function(){
3  $('#num').on('change',function () {
4    console.log('aaa');
5  });
6  $('#button').on('click',function(){
7    $("#num").val(parseInt(($("#num").val()||0))+1).trigger('change');
8  });
9});
10</script>
11<button id="button">ぷらす</button>
12<input id="num" type="number">
13