jQueryで追加した要素でイベントを使えるようにするサンプル

jQueryで要素にp、divなどの要素を追加したあと、その要素の内容を変更するときのサンプル。

下のコードは、ボタンをクリックするとテキストとボタンを表示します。追加されたボタンをクリックするとdiv id=”show”に追加されて表示されているテキスト（pタグ）ごと変更（置換）されるというプログラムです。

$(function() {
  $('#btn').one('click', function() {
    $('#show').append('<p class="hello">Hello JavaScript!</p><button class="changebtn">表示変更</button>');
  });

  $('#show').on('click', 'button.changebtn', function() {
    $('.hello').replaceWith('<p>こんにちは！！</p>');
  });
});

ここで、追加されたボタンにイベントを追加してクリックしても動かない例として、jQueryでボタンを追加したしたあと、下のコードのように、ついついjQueryで追加した要素でイベントを指定（設定）してしまうと全く機能しません。

$('button.changebtn').on('click',  function() {
  $('.hello').replaceWith('<p>こんにちは！！</p>');
});

jQueryで追加した要素にイベントを設定する場合、jQueryで生成していない要素を設定（スコープ範囲の指定）、そのあとイベント、セレクタ、関数と設定します。要素の指定部分は、$(‘#show’)を$(document)や$(‘body’)にしても動きます。

$('#show').on('click', 'button.changebtn', function() {
  $('.hello').replaceWith('<p>こんにちは！！</p>');
});