jQueryであとから付け足した要素にクリックとかのイベントを指定する

jQueryUgokanai.jpg

こんにちは!  いわだて (@dutchisover) です!ちょっとクソ嵌ってしまったので書いてみました。特定要素に"だけ"jQueryのクリックイベントが全く発動しない場合、です。

JQueryUgokanai

HTMLと要素追加時のサンプル

今回は空の【ul要素】にjQueryで後から【li要素】を追加していったんです。が...

こんなHTMLで、もとから存在した p要素 のテキストをjQueryで後から ul の中にリスト可をしてみました。

このコードで、もともと空白だった【ul要素】にリストが作成されました。

表示上は元々HTMLだった状態と変わりません。が!

普通にイベントを指定しても無視される

問題はこの後付けした【li要素】に【クリックイベント】を指定したときでした。いくらカチカチやってもうんともすんともいわないのです。ちなみにコードはこんな。

いたって普通のクリックイベントです。コードのスペルミスも無いし、指定要素を ul とかにするとしっかり動くんです。でも li に戻すと元の木阿弥。いろいろやっていくうちに、元々HTMLとして記述していなかった要素に普通にクリックイベントを当ててもダメというところまでは分かりました。

今回はWordPressを使用していて、状況によって【p要素】の個数が変動する仕様のため、あらかじめ必要個数分の空の【li要素】を用意しておくことができませんでした。なので次に考えたのが

後から追加した要素のHTML内に【onClick】イベントを埋め込んでみたけど

やってみたものの、結果は同じでしたorz

いちおうコードは

でダメでした。久々に onClick を使ったのでコードが間違ってるかもです。でも普通に解決策があったのでそちらにしました。

【live】でとりあえず動いた!

こちらの記事を参考にさせていただきました!アザース(´∀`*)

こちらを参考にコードを書き直すと

で動いた!つωT`)

んですが、参考記事も少し古く、今はこの【live関数】は推奨されなくなったとのこと。なので、正しい記述もしてみます。

今はまとめて【on関数】

【live関数】の他に似たようなもので【bind関数】【delegate関数】などがあり、それらはjQuery1.7以降より【on関数】への置き換えが推奨されています。将来的にはこれらは動かなくなり、【on関数】になるようですし、【on関数】のほうが処理が速くなるとのことなので使わない手はありません。

で、それらをふまえたコードです。

これでガッツリ動きます!
以上、@dutchisover でしたヾ(*´∀`*)ノ

最近の記事

Sponsored