【jQuery】後から追加したタグ要素にもイベントを設定可能にする方法

$().click( ～ 等で後からタグ要素を追加することがありますが、追加されたタグ要素にもclickイベント等を行おうとしてもイベントが動かなかったりします。
今回は後から追加されたタグ要素にもclickイベントが発生するようにする方法をご紹介します。

処理を実行させるクリックボタンのCSS記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tagutuika{
  padding: 4px;
  width: 380px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #cccccc;
}
.addhtml{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #4DA6FF;
}
.addapnd{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #FFB973;
}
</style>

クリックボタンと追加タグ要素出力先HTMLの記述

※cass=”tagutuika”クリックするとclass=”addarea”エリアに追加タグ要素を出力します。

<h1>以下のグレー箇所をクリックすると.html()と.append()を使ってタグ要素が追加表示されます。</h1>

<div class="tagutuika">このエリアをクリックすると、↓にタグが追加されます。</div>

<div class="addarea"></div>

.html()と.append()を使ってタグ要素を追加し、追加したタグにもclickイベントを設定したJavaScript記述

※cass=”tagutuika”クリックすると.html()と.append()を使ってclass=”addarea”エリアに追加タグ要素を出力します。
　.html()と.append()を使って追加したタグ要素をクリックするとalert()メッセージが表示されます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("body").on('click', '.tagutuika', function(){
  $(".addarea").html('<div class="addhtml">jQueryの.html()で追加したタグです。<br>この追加エリアをクリックするとalertメッセージが表示されます。</div>');
  $(".addarea").append('<div class="addapnd">jQueryの.append()で追加したタグです。<br>この追加エリアをクリックするとalertメッセージが表示されます。</div>');
});

$("body").on('click', '.addhtml', function(){
  alert("class=addhtmlタグがクリックされました！");
});
$("body").on('click', '.addapnd', function(){
  alert("class=addapndタグがクリックされました！");
});
</script>

jQueryのappendやhtmlで後から追加したタグ要素にもイベント出来るようにするデモページ

jQueryのappendやhtmlで後から追加したタグ要素にもイベント出来るようにするデモページ

※$().click( ～でクリックイベントを行うと後から追加したタグ要素にはclickイベントを設定しても動作しません。
　$(“親要素”).on(‘click’,’クリック要素’, function(){ ～ の様にクリック後追加されたタグ要素の親要素のタグを.onで設定すると後から追加されたタグ要素にもイベントを設定することができます。

※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。