クリックイベントをググるとclick()で簡単にできます、的な記事が出てきますが
click()だと動的に追加された要素にイベントがセットされない、ということに触れていないものが意外と多い気がしたので書いてみます。
やいたいこと
「アラートを表示」をクリックでアラートを表示して
「アラートを追加」をクリックでdiv#boxの最後にアラートを追加します。
index.html
<div id="box">
<p>アラートを表示</p>
</div>
<button>アラートを追加</button>
click()でイベント追加
click()を使ってイベントを設定します。
自分は今までなぜかこれだけでやってこられました笑
alert.js
$('button').click(function() {
$('#box').append('<p>アラートを表示</p>');
})
$('#box p').click(function() {
alert('アラートです');
})
ボタンクリックで要素が追加されるようになりましたが、追加した要素をクリックしてもアラートが出ません。
あとから追加された要素にはクリックイベントが設定されていないからです。
on()でイベント追加
on()を使ってイベントを設定します。
alert.js
$('button').click(function() { //同じ
$('#box').append('<p>アラートを表示</p>');
})
$(document).on("click", '#box p', function () { //onで設定
alert('アラートです');
}
これで、あとから追加された要素にもイベントが追加されるようになりました。
click()とon()の違い
click()は指定された属性にイベントが設定されるのに対して
on()はすべてのクリックに反応して、それが指定属性かどうか判別する
という違いがあります。
on()の使い方
イベントを設定
click以外にもchange load resize scroll などなどのイベントも設定できます。
複数イベントを設定
複数のイベントを設定することもできます。
むしろこのメリットのほうが大きいかもしれません。
$(document).on("click scroll", 'div', function () {
//処理
}