input fileのチェンジイベント

Question

前提・実現したいこと

input fileでファイルを選んだ後に発生するチェンジイベントで処理を行いたいのですが、
反応しません。
ご教示お願い致します。

該当のソースコード

	<form action="sample02.php" method="post" enctype="multipart/form-data">
		<div class="controls">
			<input type="file" id="files-select" multiple="multiple">
			<button class="save">送信する</button>
		</div>
	</form>

console.log("111");  //このログは取れている。他のjQueryイベントも動いている。

$("#files-select").on('change', function(e) {
	console.log('aaa');  //ファイルを選んで閉じた後にこのログが出ない。
});

Answer 1

jquery本体は読み込んでます？
コピペしたら普通に動きますけど。

    <form action="sample02.php" method="post" enctype="multipart/form-data">
        <div class="controls">
            <input type="file" id="files-select" multiple="multiple">
            <button class="save">送信する</button>
        </div>
    </form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
	$("#files-select").on('change', function(e) {
	    console.log('aaa');  //ファイルを選んで閉じた後にこのログが出ない。
	});
</script>

Comments

[tkshp]

ご回答ありがとうございます。
勉強になりました。ベストアンサーのコメントの内容で解決しました。

Answer 2

Winのchrome,Firefox,IE11,edgeあたりでは問題内容ですが
何で試しましたか？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#files-select").on('change', function(e) {
    console.log('aaa');
  });
});
</script>
<form action="sample02.php" method="post" enctype="multipart/form-data">
<div class="controls">
<input type="file" id="files-select" multiple="multiple">
<button class="save">送信する</button>
</div>
</form>>

Comments

[tkshp]

ご回答ありがとうございます。
原因は、「$(function(){～});」で囲っていないのが原因でした。
ただし、他のjQueryのコード「$(document).on("click", ".files", function(e) {～}」は、「$(function(){～});」で囲っていないのに動いていたのが不思議でした。