【jQuery】「.append」「.html」「.after」等コード追加する命令でclick等イベントが効かなくなる対象法
jQueryで要素を追加する際「.html」などのメゾットを使用すると思いますが、この後から追加する要素にclickなどのイベントで操作しようとすると反応しないことがあります。
例えば
【デモ1】
【HTML】
【CSS】
【jQuery】
こういった。場合は通常通り変更することが可能です。
しかし、「後からイベントで追加したDOM要素」は、上記の方法では
イベントが発火しません。
そういった場合は下記の方法で対処します。
【デモ2】
【CSS】
【jQuery】
この場合は、ページを開いたときにボタンを追加しています。
.on click が効かなくなるので
【jQuery】の5行目$(document)で対処します。
私も何度かはまってしまった部分なので、おぼえておくと便利かと思います。
例えば
【デモ1】
ここが変わります。
【HTML】
<div id="hoge"> ここが変わります。 </div> <input type="submit" value="変更ボタン" id="changebtn">
【CSS】
#hoge { border:1px solid #c0c0c0; } #hoge span { color:#ff0000; }
【jQuery】
$(function(){ $('#changebtn').on('click',function(){ $('#hoge').html('<span>変わりました!</span>'); }); });
こういった。場合は通常通り変更することが可能です。
しかし、「後からイベントで追加したDOM要素」は、上記の方法では
イベントが発火しません。
そういった場合は下記の方法で対処します。
【デモ2】
ここが変わります。
<div id="hoge2">ここが変わります。</div> <div id="button"></div>
【CSS】
#hoge2 { border:1px solid #c0c0c0; } #hoge2 span { color:#ff0000; }
【jQuery】
$(function(){ $(window).on('load',function(){ $('#button').html('<input type="submit" value="変更ボタン" id="changebtn2">') }); $(document).on('click','#changebtn2',function(){ $('#hoge2').html('<span>変わりました!</span>'); }); });
この場合は、ページを開いたときにボタンを追加しています。
.on click が効かなくなるので
【jQuery】の5行目$(document)で対処します。
私も何度かはまってしまった部分なので、おぼえておくと便利かと思います。
著者:poroa | 投稿日:2016年09月14日 | カテゴリ:jQuery