【jQuery】動的に追加した要素にクリックイベントが発火しない原因と対処方法

クリックイベントが発火しないサンプルコード
クリックイベントが発火しない原因
クリックイベントが発火しないときの対処方法
- documentとは？

フロントエンドの業務でjQueryで動的に追加した要素にクリックイベントが発火しないという問題に直面することが時々あります。

本記事では、クリックイベントが発火しない原因と対処方法について解説します。

クリックイベントが発火しないサンプルコード

以下のコードは、body要素の先頭に動的にbutton要素を追加し、クリックイベントを設定しています。

動的に追加したボタンをクリックすると、「ボタンがクリックされました！」というアラートが表示されるはずですが、クリックイベントが発火しません。

HTML

Copy

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【jQuery】クリックイベント</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$('#myButton').on('click', function() {
alert('ボタンがクリックされました！');
});
// 動的に追加するボタン要素
let button = '<button id="myButton">クリック</button>';
// ボタンを body の先頭に追加
$(button).prependTo($('body'));
</script>
</body>
</html>

クリックイベントが発火しない原因

jQueryで動的に追加された要素に対して直接クリックイベントを設定しても、クリックイベントは新しい要素に適用されません。

これは、jQueryがクリックイベントを設定する際に、その時点で存在する要素に対してのみ行うためです。

クリックイベントが発火しないときの対処方法

クリックイベントが発火しない例で記載している、$('#myButton').on('click', function() {部分を$(document).on('click', '#myButton', function() {と書き換えることで、jQueryで動的に追加した要素にクリックイベントを設定できます。

HTML

Copy

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【jQuery】クリックイベント</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', '#myButton', function() {
alert('ボタンがクリックされました！');
});
// 動的に追加するボタン要素
let button = '<button id="myButton">クリック</button>';
// ボタンを body の先頭に追加
$(button).prependTo($('body'));
</script>
</body>
</html>