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

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

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

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

Q&A

3回答

1819閲覧

jqueryでon()の使い方

imamoto_browser

総合スコア1161

jQuery

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

0グッド

1クリップ

投稿2015/05/20 09:37

編集2022/01/12 10:55

jqueryでon()の使い方がよくわかりません。
例えば、<div id=parent>の中にある<div id=child>にもイベントを
反映させたい場合に

jQuery(document).ready(function($){

$('#parent').on('click', function(e){ //処理 e.preventDefault(); });

});

のように書くというだけでしょうか。また、<form>内の送信ボタン押下時にphpによって生成されるhtmlの<div>に対しても上記の処理を適応させるにはどうしたらいいですか。

■追記
$(E).on( event,selector, fn);などでバインドしたイベントをoffにするのは具体的にどんな場合に使うのでしょうか。

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

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

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

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

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

guest

回答3

0

■追記
$(E).on( event,selector, fn);などでバインドしたイベントをoffにするのは具体的にどんな場合に使うのでしょうか。

$(E).off(event, [selector]);

のはずです。

投稿2015/05/20 10:10

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2015/05/20 10:16

すいません、「どんな時に使うのか」ですね。 よくあるのは、再イニシャライズする場合でしょうか。 例えば、テーブルのtrに対してイベントをバインドしました。 $("table tr").on("click", function(){ alert("hoge"); }); ajaxなどで情報を取得し、行を追加しました。 $("table").append( tr ); この行にもイベントを追加したいです。 でも、 $("table tr").on("click", function(){ alert("hoge"); }); をしたら、先に合ったtrには二重にイベントが登録されてしまいます。 そこで、 $("table tr").off("click").on("click", function(){ alert("hoge"); }); とすれば、改めてイベントを登録しなおせます。 trのナンバリングを振りなおすなどの処理を考えていただければ、一回offしてからonすれば効率的であることが分かると思います。
guest

0

例えば、<div id=parent>の中にある<div id=child>にもイベントを
反映させたい場合に
jQuery(document).ready(function($){
$('#parent').on('click', function(e){
//処理
e.preventDefault();
});
});
のように書くというだけでしょうか。

そういう意味ではありません。

単純に、id=parentのdivにイベントを追加しています。

id=childのdivがid=parentの中にあるのであれば、イベントが追加されていないid=childがクリックされたとしても、イベントバブリングという機構のために、自動的に親要素であるid=parentにクリックイベントが伝播されます。もちろん、その上の階層、更にその上の階層へと、どんどん伝播していきます。

e.preventDefault();

は、その要素のイベントをキャンセルするためのコードです。つまり、id=childはクリックされたことになりますが、id=parentは、e.preventDefault();以降、クリックされていなかったものとして扱われます。

投稿2015/05/20 09:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

また、<form>内の送信ボタン押下時にphpによって生成されるhtmlの<div>に対しても上記の処理を適応させるにはどうしたらいいですか。

お聞きになりたいのはphpによってではなく、JavaScriptによって動的に生成される<div/>要素の事ではないでしょうか?

その場合、例えば動的に生成される<div/>のclassが"hoge"でしたら、

$(document).on("click", ".hoge", function(){ … });

という記述になります。これであればドキュメントに対して監視が行われるので、後から追加したclass=hogeに対しても有効になります。

投稿2015/05/20 09:53

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問