onを利用するメリット1
問題
今回はonを使うメリットを学んでみましょう!
デモのように後からjqueryでbuttonを追加してもjqueryで設定したcssを適用させてください
デモのように後から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¥
完了にする!
解説