問題
8
jQuery
onを利用するメリット1
jQueryの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説（onを利用するメリット1）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
いかがでしたか？onを使わずに直接clickイベントに処理を書いてもあとから作ったボタンは何も反応しなかったかと思います。なぜかというと、普通にbuttonに対してclickイベントを与えてもそれは、その部分がページに読み込まれた時点で存在していたbuttonに対しての処理しか行ってくれません。なのでクリックされた時点で存在するbuttonを対象にする必要があります。解答ではparentに対してonでクリックイベントを定義していますが、この理由はデリゲートという仕組みを使っているからなのですが、難しいので簡単に言うとクリックされた親要素の中にある同じ要素（今回の場合button)に対して処理を実行してくれるというものがデリゲートです。一般的という表現はおかしいかもしれませんが、いつも使うonはバインドという使い方で.on(トリガー、関数）と記述するやつです。バインドもデリゲートもそれぞれbind()、delegate()というonと同じ使い方ができるものが用意されています。onを使って二つを使い分けるか、bindとdelegateの両方を使うかは人それぞれですので使いやすい方を選べばいいと思います。
