web creating

POROA

【jQuery】「.append」「.html」「.after」等コード追加する命令でclick等イベントが効かなくなる対象法

jQueryで要素を追加する際「.html」などのメゾットを使用すると思いますが、この後から追加する要素にclickなどのイベントで操作しようとすると反応しないことがあります。

例えば

【デモ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
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング