Edited at

jQueryでonメソッドを使ってみた


jQueryでonメソッドを使ってみた

本日も引き続きドットインストールにてjQueryを勉強しながら、自分の簡単なWebページに適用してみました。最近はドットインストールの女性ボイスにはまっています。


本日の作業


  • onメソッドを使ってドキュメントが読み込まれた時点で存在していない要素に対してクリックイベントを設定


scriptタグ内抜粋

    <script>

$(function(){
$('button').click(function(){
var p = $('<p>').text('napoleon!!!!').addClass('appear');
$(this).before(p);
});
//.apperがクリックされたらthis=p要素を取り除くという以下の記述でいけそうだがいけない
// $('.appear').click(function(){
// $(this).remove();
// });
//上のクリックイベントはドキュメントが読み込まれて初めて実行されるので、.appearがまだいない
//読み込まれた時点で存在していない要素に対してイベントをつけるにはonメソッドを使う
//書き方としては以下の通り、親要素をまず指定し.onの後にイベント,対象の要素,処理とする
$('body').on('click', '.appear', function(){
$(this).remove();
});
});
</script>


修正後のWebサイト

こちら


参考

ドットインストール jQuery入門 (全20回) #15 onメソッドを使ってみよう


関連バックナンバー

jQuery(mouseover, mouseout, focus, blur, change)を使ってみた

jQueryでボタン連打の制御をやってみた