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の両方を使うかは人それぞれですので使いやすい方を選べばいいと思います。

ログインして解答を見る