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>１０行目でクリックイベントの記述をしていて、
１７行目で後から要素クリックイベントの対象の要素を追加しています。
ボタンをクリックしても何も起きないと思います。
動かない原因
上記の例ではクリックイベントを登録したいボタンを動的に追加しております。
上記の書き方ではページ読み込み時にクリックイベントが登録されますが、イベント登録時にトリガーとなるボタンが存在しておらず、クリックイベントが正しく登録できていないため、イベントが正しく機能しないということになります。
動的に追加した要素にイベントを適用したい場合どのようにすればいいでしょうか。
動的に追加した要素にイベントを適用する方法
上記コードを1行書き換えるだけでクリックイベントを有効にすることができます。
１０行目の$(“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のイベントを適用する方法でした。
この仕組みがわかってからも中々気づけないということが続きました
コメント