« | »

02月02日 

javascript

jQueryでonclick

リクリチャットでjQueryの事を喋るなら、このエントリの基礎みたいな感じ。でも今回も喋る人が多そうだから自粛しようかな。

さて。
例えばAJAXでXMLを引っ張ってきて、DOMで要素を追加して、そいつをクリックしたらイベントを駆動させる、というシチュエーションの時。

jQuery.each(data, function(i, dat) {
　　jQuery('<a/>')
　　　　.attr('class', 'hoge')
　　　　.attr('href', 'javascript:void(0)')
　　　　.attr('onclick', 'fuga('+dat.id+')')
　　)
　　.append('to')
)};

は、Firefoxだと動く。Chromeだとonclick属性が入らず動かない。

jQuery.each(data, function(i, dat) {
　　jQuery('<a/>')
　　　　.attr('class', 'hoge')
　　　　.attr('href', 'javascript:void(0)')
　　　　.click(function() {fuga(dat.id);})
　　)
　　.append('to')
)};

は動く。Chromeでも。

でもタブンもうちょっとスマートにするなら、

jQuery.each(data, function(i, dat) {
　　jQuery('<a/>')
　　　　.attr('id', 'btn_fuga')
　　　　.attr('class', 'hoge')
　　　　.attr('href', 'javascript:void(0)')
　　　　.attr('rel', dat.id)
　　)
　　.append('to')
)};
jQuery('#btn_fuga').click(
　　fuga(jQuery(this).attr('rel'));
);

てな感じか。検証してない＆突っ込みどころ満載かと思いますので、各自で勉強して下さいな。
jQueryマンセー！だけど、微妙な部分があるのもまた事実。

コメントなし

コメント & トラックバック

コメントなし

コメントフィード

コメント