2014年07月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

[jQuery]appendなどで追加した要素にはclickやhoverがきかないのを解決する

appendなどで動的に要素を追加したとき。
追加された要素にclick()を指示しても動かない。

これは.on()を使うことで解決する。

■clickの場合

動かないやつ
$('#btn').click(function(){
console.log("成功!");
});

動くやつ
 $(document).on('click','#btn',function(){
console.log("成功!");
});


■hoverの場合

動かないやつ
$('#btn').hover(function(){
console.log("マウスのったー!");
},
function(){
console.log("お、おりたー!");
});

動くやつ
$(document).on('mouseenter','#btn',function(){
console.log("マウスのったー!");
});
$(document).on('mouseleave','#btn',function(){
console.log("お、おりたー!");
});


それにしても.onのリファレンスってまともなのが見当たらないというか、
event一覧がちゃんと乗ってるのがみあたらなくて困った。

だれか見つけたらおしえとぅ 

hlightline.jsを使っていて、高さがつぶれたように変になる。

不具合かどうかはわかりませんが、

以下のようにしたら直ったのでメモ

直す前
$(".box > ul > li").heightLine(); 

直した後
$(window).on("load",function(){
$(".box > ul > li").heightLine();
});

ちょっと時間がなくて原因をしっかりさぐってないです。
$(function(){

});

で囲んでるからちゃんとdomができたあとに発動してるはずなんだけどなぁ。 

スマホ(iphone/android)とpcをuseragentでわけるんだけど、androidタブレットもpc側にしたいとき

なんのこっちゃっていうタイトルだけど、

普通にユーザーエージェントで、スマホとpcわけるってやり方だと、androidタブレットが困ったことになってしまうっていうパターンがある。

ipadは、大画面なのでpc側のデザインを見せたい、というとき
当然androidタブレットもpc側のデザインを見せたいんだけど、
うっかりandroidっていうuaで分けるから、androidタブレットではスマホ用の画面が出ちゃうってわけ。

これまでandroidタブレット使ってる人が少なかったからあまり気にならなかったけれど、これからはどんどん増えていくだろうから、ちゃんとしておきたい。

そこでandrdoidタブレットはpc側の表示をしたいよ!っていうときにコピペでつかえるjsを用意しましたぞ。



if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
document.write("<link rel='stylesheet' href='css/sp.css'>");
}




useragentがスマホだったときにホニャララする、っていうjsです。

上記の例だと、sp.cssを読み込ませるようにしてるけど、/sp/index.htmlに転送するとかもOKだぜ!

記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ