ログイン
問題8

onを利用するメリット1

アイコン画像

問題8:onを利用するメリット1

今回はonを使うメリットを学んでみましょう!
デモのように後からjqueryでbuttonを追加してもjqueryで設定したcssを適用させてください

エディターのアイコンあらかじめエディタに書くコード

                <p>ボタンを押すとボタンの色が変わります。</p>
<div class="parent">
  <button>ボタン</button>
</div>
<div class="add">button追加ボタン</div>
¥HTML¥
              
                .add{
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #dddddd;
  margin-top: 30px;
  cursor: pointer;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              $(function () {
  $(".parent").on("click","button",function(){
    $(this).css("color","red");
  });
  $(".add").click(function(){
    $(".parent").append("<button>ボタン</button>");
  });
});
¥JavaScript¥
            

コメントのアイコン解説

いかがでしたか?onを使わずに直接clickイベントに処理を書いてもあとから作ったボタンは何も反応しなかったかと思います。なぜかというと、普通にbuttonに対してclickイベントを与えてもそれは、その部分がページに読み込まれた時点で存在していたbuttonに対しての処理しか行ってくれません。なのでクリックされた時点で存在するbuttonを対象にする必要があります。解答ではparentに対してonでクリックイベントを定義していますが、この理由はデリゲートという仕組みを使っているからなのですが、難しいので簡単に言うとクリックされた親要素の中にある同じ要素(今回の場合button)に対して処理を実行してくれるというものがデリゲートです。一般的という表現はおかしいかもしれませんが、いつも使うonはバインドという使い方で.on(トリガー、関数)と記述するやつです。バインドもデリゲートもそれぞれbind()、delegate()というonと同じ使い方ができるものが用意されています。onを使って二つを使い分けるか、bindとdelegateの両方を使うかは人それぞれですので使いやすい方を選べばいいと思います。
ログインして解答を見る
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる