jQueryで動的に生成される要素に対するイベントの設定方法

jQueryをいじっていて、地味に手間取って解決に時間がかかったので備忘録。

jQueryのイベントハンドラを使ってclassやidを動的に付与して値を格納して表示させることってよくあると思うんですが、jsのスクリプトが開始した後に追加された要素(下のコードで言うimage要素など)に対してはメソッドが効きません。
※よく考えれば当たり前ですけど本当にわからなくてうごめいてました。。

結論から言うと、.on()を使ってこういう書き方をすればうまくいきました。
※他にもっといい処理の方法があれば教えていただきたい…!

$(document).on('hover', 'li.image', function() {});

■ jQueryの.on()のリンク

 
一応、(自分に)わかりやすいように例として、画像の背景色をピンクに変更する処理で見比べてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   	<style>
        	body {
        	    text-align:center;
        	}
        	img {
        		max-width:100%;
        		height:auto;
        		width:auto\9;
        	}
	        ul {
	            list-style-type: none;
	            padding: 10;
	            margin: 10;
	        }
	        li.image {
	            float:left;
	            width:150px;
	            height:150px;
	            padding:10px;
	        }
    	</style>

<body>
<h1>Test</h1>
<ul id="list0">
	<li class="image"><img src="keito7.jpg" alt=""></li>	
</ul>
<ul id="list"></ul>
<script>
	$(function() { // ページが読み込まれたら実行
	$('#list').empty(); // 表示結果をリセット
	var q = ["hawaii"];
		var url = "https://api.instagram.com/v1/tags/" + q[0] + "/media/recent";
		$.ajax({
			url: url,
			data: {
			client_id: "各々で取得したinstagramのクライアントID"
			},
			dataType: "jsonp",
			success: function(result) {
					var media = result.data[0];
					$('#list').append(
						$('<li class="image">').append(
							$('<img>').attr({ src: media.images.standard_resolution.url })
						)
					);
			}
		});


/*
 *
 * ここに処理が入るよ(^q^)!
 *
*/
	
	});

</script>
</body>
</html>

 
 

静的な要素の色を変更する場合

通常の静的なhtmlのimageクラス要素に対してjQueryを使って背景色を変更する際には以下のような処理になります。

// 画像にマウスonされたら色を変える処理(静的)
$('.image').hover(function () {
  $(this).css({'background-color':'#ff99cc'});
});

左:静的な要素の中に格納された画像

右:動的な要素の中に格納された画像

ただし、これだとマウスオーバーしても動的に取得された画像の背景色が変更されません。

 

動的な要素の色を変更する場合(静的な要素の色変更も含む)

動的に生成されたhtmlのimageクラスに対して背景色を変更する際には以下のような処理にすればおkのようです。

// 画像にマウスonされたら色を変える処理(動的)
$(document).on('hover', 'li.image', function() {
  $(this).css({'background-color':'#ff99cc'});
});

.on()は第一引数でevent typeを、第二引数でselectorを指定するような書き方をするらしいのでそのように書き換えます。
 

左:静的な要素の中に格納された画像

右:動的な要素の中に格納された画像

 
これで一応、動的な要素の中に格納された画像にマウスオーバーした際にも背景色が変更されているのを確認できました。
 

 
いじょ
 

Categorized: jQuery