【JavaScript】動的生成DOMのクリックイベント発火
みなさん、こんにちは！
エンジニアのおちのです。
今回は、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の等価比較（==, ===）について