jQueryのイベントがなぜか動かないとき


jQueryを書き始めたころ、クリックイベントなどがなぜか効かないということがよくありました。
こんなやつです。

$("button").on("click",function(){
	//処理
})


調べてると動的に後から追加した要素にはjQueryのイベントが効かないということがわかってきました。
一番最初はこの現象で3,4時間時間をつぶしましてしまいました。
ということで今回は後から動的に追加した要素にjQueryを適用する方法を記します。



①jQueryが効かない例

まずはjQueryが効かない例を載せます。

<div class="output"></div>
<img class="slime" src='./img/slime.png'>

<style>
	.slime{transition:3s;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(".jump-button").on("click",function(){
		$(".slime").css("margin-top","-100px")
		setTimeout(function(){
			$(".slime").css("margin-top","0px")
		},1000)
	})
	$content="<button class='jump-button'>バウンド</button>"
	$(".output").append($content)
</script>


10行目でクリックイベントの記述をしていて、
17行目で後から要素クリックイベントの対象の要素を追加しています。
ボタンをクリックしても何も起きないと思います。




これを1行書き換えるだけでクリックイベントを有効にすることができます。

10行目の$(“button”).on(“click”,function(){ の部分を
$(document).on(“click”,”button”,function(){ に変更します

<div class="output"></div>
<img class="slime" src='./img/slime.png'>

<style>
	.slime{transition:3s;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(document).on("click",".jump-button",function(){  //ここを書き換える
		$(".slime").css("margin-top","-100px")
		setTimeout(function(){
			$(".slime").css("margin-top","0px")
		},1000)
	})

	$content="<button class='jump-button'>バウンド</button>"
	$(".output").append($content)
</script>


これで動的に追加したボタンへのクリックイベントが有効になりました。
ボタンを押すとスライムがバウンドすると思います。
この文字も一緒に動いてると思います。笑




以上、 動的に追加した要素へjQueryのイベントを適用する方法でした。

この仕組みがわかってからも中々気づけないということが続きました

コメント

タイトルとURLをコピーしました