jQueryであとから付け足した要素にクリックとかのイベントを指定する
HTMLと要素追加時のサンプル
今回は空の【ul要素】にjQueryで後から【li要素】を追加していったんです。が．．．
[html]
<p>茶トラ</p>
<p>ミケ</p>
<p>サバ</p>
<ul></ul>
[/html]
こんなHTMLで、もとから存在した p要素 のテキストをjQueryで後から ul の中にリスト可をしてみました。
[javascript]
var lists; //リスト可したpのテキスト入れ
for (var i=0; i<jQuery("p").length; i++) {
var t = jQuery("p").eq(i).text();
lists += "<li>" + t + "</li>";
}
jQuery("ul").append(lists);
[/javascript]
このコードで、もともと空白だった【ul要素】にリストが作成されました。
[html]
<ul>
<li>茶トラ</li>
<li>ミケ</li>
<li>サバ</li>
</ul>
[/html]
表示上は元々HTMLだった状態と変わりません。が！
普通にイベントを指定しても無視される
問題はこの後付けした【li要素】に【クリックイベント】を指定したときでした。いくらカチカチやってもうんともすんともいわないのです。ちなみにコードはこんな。
[javascript]
jQuery("li").click(function(){
alert(jQuery(this).text() + "(=ﾟωﾟ)ﾉﾆｬｰ");
});
[/javascript]
いたって普通のクリックイベントです。コードのスペルミスも無いし、指定要素を ul とかにするとしっかり動くんです。でも li に戻すと元の木阿弥。いろいろやっていくうちに、元々HTMLとして記述していなかった要素に普通にクリックイベントを当ててもダメというところまでは分かりました。
今回はWordPressを使用していて、状況によって【p要素】の個数が変動する仕様のため、あらかじめ必要個数分の空の【li要素】を用意しておくことができませんでした。なので次に考えたのが
後から追加した要素のHTML内に【onClick】イベントを埋め込んでみたけど
やってみたものの、結果は同じでしたorz
いちおうコードは
[javascript highlight=”4″]
var lists; //リスト可したpのテキスト入れ
for (var i=0; i<jQuery("p").length; i++) {
var t = jQuery("p").eq(i).text();
lists += "<li "onClick=’clickEvent()’;>" + t + "</li>";
}
jQuery("ul").append(lists);
function clickEvent(){
alert(jQuery(this).text() + "(=ﾟωﾟ)ﾉﾆｬｰ");
}
[/javascript]
でダメでした。久々に onClick を使ったのでコードが間違ってるかもです。でも普通に解決策があったのでそちらにしました。
【live】でとりあえず動いた！
こちらの記事を参考にさせていただきました！ｱｻﾞｰｽ(´∀｀*)
こちらを参考にコードを書き直すと
[javascript highlight=”8,9,10″]
var lists; //リスト可したpのテキスト入れ
for (var i=0; i<jQuery("p").length; i++) {
var t = jQuery("p").eq(i).text();
lists += "<li "onClick=’clickEvent()’;>" + t + "</li>";
}
jQuery("ul").append(lists);
jQuery("li").live("click", function(){
alert(jQuery(this).text() + "(=ﾟωﾟ)ﾉﾆｬｰ");
}
[/javascript]
で動いた！つωT｀)
んですが、参考記事も少し古く、今はこの【live関数】は推奨されなくなったとのこと。なので、正しい記述もしてみます。
今はまとめて【on関数】
【live関数】の他に似たようなもので【bind関数】【delegate関数】などがあり、それらはjQuery1.7以降より【on関数】への置き換えが推奨されています。将来的にはこれらは動かなくなり、【on関数】になるようですし、【on関数】のほうが処理が速くなるとのことなので使わない手はありません。
で、それらをふまえたコードです。
[javascript highlight=”8,9,10″]
var lists; //リスト可したpのテキスト入れ
for (var i=0; i<jQuery("p").length; i++) {
var t = jQuery("p").eq(i).text();
lists += "<li "onClick=’clickEvent()’;>" + t + "</li>";
}
jQuery("ul").append(lists);
jQuery(document).on("click", "li", function(){
alert(jQuery(this).text() + "(=ﾟωﾟ)ﾉﾆｬｰ");
}
[/javascript]
これでガッツリ動きます！
以上、@dutchisover でしたヾ(*´∀｀*)ﾉ
