質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

427閲覧

documentとready関数

tkshp

総合スコア174

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/10/16 06:36

前提・実現したいこと

ready関数で囲わなくても、動くイベントハンドラと動かないイベントハンドラがありました。

下記のように、
$(document).on("click"~は、ready関数で囲わなくても動き、
$("#files-select").on('change'~はready関数で囲わないと動きませんでした。

もしかして、「documentをイベントリスナにすると、ready関数で囲わなくても動き、
document以外のイベントリスナのイベントハンドラは、ready関数で囲わないと動かない」、ということでしょうか?

ご教示お願い致します。

$(document).on("click", ".files", function(e) { }); $("#files-select").on('change', function(e) { });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

onを呼び出しているタイミングであれば、その時点で存在するオブジェクトの場合
その中にあるセレクタでつかめるものは後から指定しても動きます。
documentや"body"などDOMであれば必ず存在するものを指定することが多いわけです。

投稿2018/10/16 06:52

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkshp

2018/10/16 08:26

ご回答ありがとうございます。 勉強になりました。
guest

0

他の方の回答に補足しますと...

Direct and delegated event handlers - .on() - jQuery

まず、イベントはBubbling(バブリング)といって、例えばボタンをクリックするとそのボタンで click イベントが発生し、次にその親要素で click イベント、さらにその親...と、泡のように浮上していくという仕様になっています。

$elements.on(event, selector, listener)の形の場合は、子孫要素からこのバブリングによって該当するイベントがのぼってきたとき、その発生させた要素がselectorに該当すればlistenerを実行する、ということです。

つまり、下からのぼってくるイベントを監視するという形なので、あとからselectorに該当する子孫要素が追加されてそれがイベントを発生させるというケースにも対応できるというわけです。

投稿2018/10/16 07:17

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkshp

2018/10/16 08:26

ご回答ありがとうございます。 勉強になりました。
guest

0

ベストアンサー

そのJavaScriptコードは<head>とか(<body>より前)に書かれているんですよね?
要は、JavaScriptが「いつそのIDを認識するか」の問題です。
対象とする要素(今の場合、ID:files-select)がHTML内に出現する前に

$("#files-select").on(

と書いても、「そんなIDなかったぞ」ということで機能しません。

<input type="file" id="files-select" multiple="multiple"> <script> $("#files-select").on('change', function(e) {

だったら動きます。(既にそのIDの要素を認識しているので)

$(document).on については、全体に向けたリスナの登録ですので、中身がある前提で動くならば当然後先関係なく動作します。
readyで囲めば、全体の読み込みが終わってからリスナの登録が始まりますので、こちらも前後関係なく動きます。

投稿2018/10/16 06:58

kunai

総合スコア5405

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkshp

2018/10/16 08:25

ご回答ありがとうございます。 試しに、ID:files-selectの後ろにJavaScriptの読み込みコードを書いたら、 ready関数無しでも「$("#files-select").on('change'~」が動くのが確認できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問