【JavaScript/jQuery】後から生成されたDOMからイベントを発火させる

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

【JavaScript】クリップボードに文字列をコピーする

document.execCommand("copy") が選択した要素の文字列のみしかコピー出来ないので、
一時的に要素を作って、選択してコピーする。

const copyToClipboard = s => {
    const d = document;
    // copy用の一時要素を作成し、文字を入れる
    const t = d.createElement('pre');
    t.textContent = s;
    // 表示されていないとコピー出来ないのでbodyに追加する
    d.body.appendChild(t);
    // 追加した要素を選択しコピーする
    // コピー後に追加した要素を消すので画面上はほぼ影響がない
    d.getSelection().selectAllChildren(t);
    d.execCommand('copy');
    d.body.removeChild(t);
}

document.getElementById('button').onclick = () => copyToClipboard(Date());

↓ボタンを押すと現在時刻がクリップボードにコピーされる。

See the Pen ERLxzm by baetdjam (@beatdjam) on CodePen.

【JavaScript】アロー関数

• アロー関数のthisは定義した場所のthisで固定される

this.val = `global`;

let obj1 = {
    val: 'obj1',
    print:function(){
      console.log(this.val);
    },
    printAllow:() => {
      console.log(this.val);
    }
}

// obj1のthisを参照するので
// obj1が出力される
obj1.print();

// 定義した場所の外側のthisを参照するので
// globalが出力される
obj1.printAllow();

• アロー関数はargumentsオブジェクトを持っていないので残余引数(rest parameters)で代用する

const restParamSample = (a,b,...r)=>{
    return console.log(a, b, r);
};
restParamSample(1,1,4,5,1,4);  //1 1  4, 5, 1, 4