JavaScript

append()、html()を使って後から追加したタグ要素にイベントを設定する方法【jQuery】

  /

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

Web開発では、ページに動的に要素を追加したいときがあります。例えば、ボタンをクリックしたときに新しい要素が表示されるなどです。しかし、このときに問題になるのが「追加した要素に対するイベント設定」です。通常、既存の要素にイベントを設定するには `$().click()` などを使いますが、後から追加された要素にこの方法で設定すると、うまく動作しないことがあります。
今回は、jQueryの `.html()` と `.append()` を使って新しい要素を追加し、それらの要素に対して `click` イベントを設定する方法をご紹介します。

Contents

後から追加した要素にイベントを設定するCSS記述

ここでは、追加した要素に対するデザイン（CSS）を設定します。この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でのクリックボタンと追加タグ要素の出力先の構成

次に、HTML部分の設定です。このHTMLコードでは、cass=”tagutuika”をクリックしたときにタグ要素が追加されるclass=”addarea”エリアと、ボタンとして機能するエリアを定義します。
この構成を使って、追加したい要素がどこに現れるかを指定します。 

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

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

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

上記のHTMLコードでは、クリックすると「addarea」というクラスのエリアに新しいタグ要素が追加されます。追加する要素の表示場所を意識して、このエリアを設定しておきましょう。

JavaScriptでタグ要素にイベントを設定する方法

最後にJavaScriptを使って、後から追加した要素に対してイベントを設定します。jquery-2.2.0.min.jsファイルを読み込みます。
通常、クリックイベントを設定するときは `$().click()` を使用しますが、後から動的に追加した要素にはこの方法がうまく機能しません。そこで、`.on()` メソッドを使います。`.on()` メソッドを使うと、親要素に対してイベントを設定することができ、後から追加された子要素にもイベントが適用されるようになります。
例えば、次のJavaScriptコードを参考にしてください。

<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>

このコードでは、次の動作が行われます。

  • .tagutuika クラスのエリアがクリックされたとき – 「.addarea」に .html() と .append() を使って新しい要素が追加されます。
  • .addhtml クラスの要素をクリックしたとき – アラートメッセージが表示されます。
  • .addapnd クラスの要素をクリックしたとき – 同様にアラートメッセージが表示されます。

このようにすることで、動的に追加した要素にもイベントが正常に設定され、意図した動作を行うことが可能です。

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

実際に動作を確認するには、デモページを参考にしてください。以下のリンクをクリックすると、`.html()` と `.append()` を使って追加した要素にイベントを設定したデモページにアクセスできます。このページで、動的に追加される要素へのイベント設定の仕組みを理解できるでしょう。

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

まとめ

動的に追加した要素にもイベントを設定する方法について、今回はjQueryの `.on()` メソッドを使用した設定方法をご紹介しました。後から追加される要素のイベント設定は、Webページにインタラクティブな要素を追加する際に非常に便利です。
jQueryを活用することで、動的なページ構成をよりスムーズに実現でき、ユーザーの操作に応じた柔軟な動作が可能になります。.on() メソッドはイベントデリゲーションの一種であり、動的な要素操作が求められる場面で広く活用される技術です。この技術を活用して、ユーザーが求める機能や操作性を提供するサイトを構築しましょう。

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

onイベント 追加タグイベント
関連記事