AndroidでjQueryが動かないなぁと思ったときに確認するべきかもしれない恐ろしい罠

JavaScript jQuery Android

jQuery を使っているスマートフォンサイトで、AndroidだけJavaScriptが機能しない事態が発生し原因の究明に相当の時間を要したのでメモ。

以下のようなJavaScriptコードがあるとAndroidで死亡するようです。（当該要素のclass属性に任意の文字列を指定するコード）

$("#hoge").attr({class:"hoge"});

問題のポイントは、attr()の引数に、添字にクオテーションで囲まないclassを含んだオブジェクトを指定すること。これでAndroidが動きません。
class以外の属性や、classをクオテーションで囲えば問題ないようです。

この箇所が実行されなくても、コード内にあるだけでダメです。たとえばこんな感じ・・・

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#hoge1").bind("click",function(e){
		e.preventDefault();
		alert("ほげほげ");
	});
});
function hogehoge(){
	$("#hoge2").attr({class:"moge"});
}
</script>
</head>
<body>
<div class="wrap">
	<a href="#" id="hoge1">ほげ１</a>
	<p id="hoge2">ほげ２</p>
</body>
</html>


私の実行環境は、Android2.2.1、jQuery 1.7.2 です。