JavaScriot

【JavaScript】動的生成DOMのクリックイベント発火

#技術系
written by おちの

みなさん、こんにちは!

エンジニアのおちのです。

今回は、JavaScriptで動的に生成したDOMの、クリックイベント発火方法について書いていきます。

仕様イメージ

addボタンと、リスト項目が表示されています。

addボタンを押下すると、リスト項目が追加されます。

任意のリストをクリックすると、”リスト”の文字が太字&下線付きになります。

ソース

では、ソースを見ていきます。
今回メインとなるのはJavaScriptソースとなりますので、HTMLとCSSはご参考までに。

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>goat blog</title>
</head>

<body>
  <button id="addList" class="button" type="input">add</button>
  <div class="listBox">
    <ul>
      <li id="listItem" class="listItem"><a id="link" href="javascript:void(0);">リスト</a></li>
    </ul>
  </div>
<script src="./js/main.js"></script>
</body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  margin: 0;
  padding: 20px 350px;
  font-family: "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  background-color: rgb(223, 218, 213);
}

a {
  text-decoration: none;
  color:rgb(106, 153, 135);
  font-size: 14px;
}

li {
  list-style: none;
}

.base {
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 3%;
  padding-right: 3%;
}

.button {
  padding: 5px 15px;
  background-color: rgb(106, 153, 135);
  color: white;
  border-color: rgb(106, 153, 135);;
  border-radius: 4px;
  font-size: 20px;
}

.listBox {
  width: 150px;
  height: fit-content;
  margin: 10px 0;
  padding: 10px 0;
  border: 1px solid rgb(106, 153, 135);
  border-radius: 4px;
  background-color: whitesmoke;
}

.listItem {
  padding: 0 10px;
}

JavaScript

では、クリックイベント定義をみていきます。
先頭リストはIDが「ListItem」となります。
こちらのクリックイベントの書き方は下記の通りとなります。

// 先頭リストクリック
$('#listItem').on('click', function() {

  // 太字設定
  $(this).css('fontWeight', 'bold');
  // 下線設定
  $(this).css('textDecoration', 'underline');

});

これで、先頭のリストをクリックした時に太字&下線付きになります。

addボタンを押したときの処理を見てみます。
ここで生成するリストのIDは、「addListItem」となります。

// addボタンクリック
$('#addList').on('click', function() {

  $('ul').append("<li id='addListItem' class='listItem'><a id='link' href='javascript:void(0);'>リスト</a></li>");

});

ということは、追加されたリストのクリックイベントの書き方はこうなるはず・・・

// 追加リストアイテムクリック時
$('#addListItem').on('click', function() {

  $(this).css('fontWeight', 'bold');
  $(this).css('textDecoration', 'underline');

});

いざ、追加されたリストをクリック!

・・・何も反応しない!!
つまり、この書き方は、動的なDOM操作で追加された要素の場合は発火しないのです。

では、どう書けばよいのか?

// 追加リストアイテムクリック時
$(document).on('click', '#addListItem', function() {

  $(this).css('fontWeight', 'bold');
  $(this).css('textDecoration', 'underline');

});

上記の通りとなります。
documentに紐づくクリックイベントとして、第2引数に要素を指定します。

追加したリストをクリックすると、

イベントが発火してフォントが設定されました~!

以上となります。
最後まで読んでいただき、ありがとうございました!

【JavaScript関連】
【JavaScript基礎】JavaScriptの等価比較(==, ===)について