jQueryを使ってページに要素を追加し、その要素にイベント処理を設定しようとしたところ、失敗しました。
かなり初歩的なミスでした。
まず、こんな感じでボタンを用意します。
<body>
<button id="first">ボタンを追加する</button>
</body>
ボタンを押すとボタンを追加するようにします。
追加したボタンを押すと、メッセージが表示されるようにします。
$(function(){
$('#first').click(function(){
$('body').append('<button id="second">メッセージを表示する</button>');
});
$('#second').click(function(){
alert('このメッセージは表示されません！');
});
});
しかし、このような書き方だと、メッセージは表示されません。
追加したボタン(id="second")は、ページ読み込み時に存在していなかったため、イベント処理を設定できなかったようです。
$(function(){
$('#first').click(function(){
$('body').append('<button id="second">メッセージを表示する</button>');
})
$('body').on('click', '#second', function(){
alert('このメッセージは表示されます！');
});
});
このようにonメソッドを使うと、ページ読み込み時に存在しなかった要素にもイベント処理を設定できます。