たまにやる。あんまりやらない。だから困る。
具体例の話
こんなのがあったとする。
<div class="wrap">
<button class="alert">CLICK</button>
</div>これは動く。
$('button.alert').on('click',function(){
alert('押したよ');
})で、こんなのがあったとする。
<div class="wrap">
<button class="add">CLICK</button>
</div>
<div class="target">
<button class="alert">CLICK</button>
</div>こういうのを作ったとする。
$('button.alert').on('click',function(){
alert('押したよ');
})
$('button.add').on('click',function(){
$('.target').append('<button class="alert">add CLICK</button>');
})jsでHTMLタグを出力。元からあるものはイベントが発火するのに、jsで追加したやつをクリックしても何も起きない。なんでや、という話。
考え方
バグじゃなくてそういう仕様なんだと理解する。
既にあるものに対してイベントは掛かってるので、同じ内容のものを追加しても別物扱い、対象外になるって感じ。追加で出力されたHTMLにjsでギミックを盛れないってわけじゃない。この書き方じゃダメだってこと。やりようは普通にある。
こうすれば動く
<div class="wrap">
<button class="add">CLICK</button>
</div>
<div class="target">
<button class="alert">CLICK</button>
</div>$('button.alert').on('click',function(){
alert('押したよ');
})
$('button.add').on('click',function(){
$('.target').append('<button class="alert">add CLICK</button>');
$('button.alert').on('click',function(){
alert('押したよ');
})
})出力するイベントの中に発火イベントを書く。初期状態でHTML上に対象のタグがなければ移せば良いんだけど、今回の例みたいに既に同じものがある場合はそうすると元々あるものが動かないのでこうなる。
重複の場合はベタ打ちじゃなくて関数で管理したほうが、呼び出すだけなんで楽。
$function FnAlert(){ alert('押したよ'); }
$('button.alert').on('click',function(){
FnAlert();
})
$('button.add').on('click',function(){
$('.target').append('<button class="alert">add CLICK</button>');
$('button.alert').on('click',function(){
FnAlert();
})
})関数の利用は凝ったことをするほど恩恵がデカくなる。
更に楽になる方法。
$(document).on('click','button.alert',function(){
alert('押したよ');
})
$('button.add').on('click',function(){
$('.target').append('<button class="alert">add CLICK</button>');
})$(document)を指定した書き方だと1回で済む。関数でどうのこうのする必要がない。指定の対象が変わるんでそもそものところをひっくり返した形になる。
関数は関数でメリットがあるので、組み方によってどちらを採用するか選ぶ感じになる。
実用例
入力項目が増減するフォームを作る際はこれを知らないと話にならない。追加は良いけど削除ができないだとか、追加したフォームの内容を取得できないだとか、詰みが見える。
まとめ
正直、必要になる場面はそんなに無い。ほぼ無い。これありきでコンテンツを組まないと出番はない。インタラクティブというか、ユーザーに何かさせるためのコンテンツが前提になってくるんだろうなと。そういうのは通常のWEBサイトとは別物になりがちだよねって。
お陰で、以前取り組んだことのある内容だったのに対策部分が記憶からスッポ抜けてた。怖いですね。
コメント