jQueryの場合
昔こういう事するときはjQueryのlive()を利用していたんだけど、1.9で死んでた。
$("p").live("click", function(){ $(this).after("<p>これもクリックできる</p>"); });
1.9以降で同じ挙動させるならonを使う
$(document).on('click', 'p', function() { $(this).after("<p>これもクリックできる</p>"); });
documentの部分を別のjQueryオブジェクトにすると、
そのオブジェクト配下だけで動的にイベントが付与される。
// hoge配下にp要素ができたときだけイベントを付与 $("#hoge").on('click', 'p', function() { $(this).after("<p>これもクリックできる</p>"); });
jQueryの場合のサンプル
See the Pen EOwjbB by beatdjam (@beatdjam) on CodePen.
pure JSの場合
pure JSの場合は、親要素にイベントを仕込んで、eventのtargetの属性を見ることで対応するっぽい。
対象のelementの条件がidか、classか、tagNameかによって挙動が変わって分かりづらい。
正直jQueryのほうがきれいだと思う。
document.addEventListener('click', function (e) { // idの場合はこう // if (e.target.id === 'hoge') { // class名指定の場合はこう // if (e.target.classList.contains('hoge')) { // タグ名指定の場合はこう(大文字で取れるのでtoLowerCaseしている) if (e.target.tagName.toLowerCase() === 'p') { e.target.insertAdjacentHTML('afterend', "<p>これもクリックできる</p>") } });
JSでもaddEventListenerするelementを絞ってやることができる。
document.querySelector("#hoge").addEventListener('click', function (e) { if (e.target.tagName.toLowerCase() === 'p') { e.target.insertAdjacentHTML('afterend', "<p>これもクリックできる</p>") } });
JavaScriptの場合のサンプル
See the Pen WYZvOd by beatdjam (@beatdjam) on CodePen.
insertAdjacentHTMLについては下記参照。便利。
innerHTML より insertAdjacentHTML を使う - Qiita