Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

jQuery サイト構築

【jQuery】onメソッド

投稿日:

                                                                                                                                 

今日はjQueryで動的に作られた要素に対してイベントを指定する方法をみていきたいと思います。

onメソッドを使えばjQueryで動的に作られた要素に対してイベントを指定することが出来るのですが、そもそもなんでonメソッドを使う必要があるのかという部分からまとめていきたいと思います。

onメソッドを使う理由

例で以下のソースを用意しました。

<p>onメソッドを使う理由</p>
<button>動的に要素を追加</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function(){
			var p = $("<p>").text("追加されたp要素").addClass('add');
			$(this).after(p);
		});
	});
</script>

ボタンをクリックするとボタンの下に「追加されたp要素」というテキストが現れます。

これがjQueryによって動的に作られた要素です。

次に動的に作られた要素に対してイベントを設定していきます。
私がonメソッドを知らなかったときは(つい最近)、このように指定していました。

<div class="wrap">
	<p>onメソッドを使う理由</p>
	<button>動的に要素を追加</button>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function(){
			var p = $("<p>").text("追加されたp要素").addClass('add');
			$(this).after(p);
		});

		$(".add").click(function(){
			$(this).fadeOut();
		});
	});
</script>

やりたいことはaddクラスがついている要素をクリックすると非表示にするということです。

実際にやってみていただくとわかると思うんですが、これだと動きません。
ドキュメントが読み込まれた時点でaddクラスがついた要素は存在していません。
存在していない要素に対してイベントを指定しても、「そんなのないよ」ってなって何もおこりません。

じゃあどうするか。
ここで登場するのがonメソッドです。
onメソッドはドキュメントが読み込まれた時点で存在していなかった要素にイベントをつけることができます。
天才ですね。

onメソッドの使い方

onメソッドの構文です。

$(“イベントの対象になる要素の親要素”).on(“イベント”,”イベントの対象になる要素”,function(){
//処理
})

実際に先程のソースを書き換えてみましょう。

<div class="wrap">
	<p>onメソッドを使う理由</p>
	<button>動的に要素を追加</button>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function(){
			var p = $("<p>").text("追加されたp要素").addClass('add');
			$(this).after(p);
		});

		$(".wrap").on("click",".add",function(){
			$(this).fadeOut();
		});
	});
</script>

こうすることで動的に追加されたaddクラスのp要素をクリックすると非表示になります。

よくつかわれるということなので動的に要素を追加したときにはすぐにonメソッドのことを思い出せるようにしておきましょう。
今日はここまでです。
せば!

-jQuery, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

メディアクエリ

レスポンシブデザイン スマートフォンやタブレットの普及に伴い、サイトを構築するときはデスクトップサイズだけでなく、 それぞれのデバイスにあったレスポンシブデザインの構築が必要になってきています。 今日 …

no image

iframeのレスポンシブデザイン

youtube動画をサイトに埋め込む youtube動画をサイトに埋め込みたいというときの埋め込み方法を書いていきます。 動画の下にある共有をクリック 埋め込みコードをクリックするとhtmlが出てくる …

no image

【jQuery】attr、data、書き換え

attr 今日はまずはじめにhtmlの属性の値を取得したり変更したりすることができるアトリビュートメソッド(attr)を見ていきます。 属性を取得するときは $(“要素”).a …

no image

【jQuery】イベント-マウスイベント・フォームイベント

jQueryには様々なイベントが用意されています。 イベントというのは例えばクリックされたときにどうするかとか、値が変わった時にどうするかなどを指定するためのものです。 イベントには ・マウスを操作し …

no image

【Javascript】コンソールとは何か?

今回からJavascriptについて勉強したことを書いていきます。 はじめに言っておきますがJavascriptが必要なときは今までほとんどコピペで過ごしてきました。 苦手意識があり、本当に初心者です …