android4.1 chromeで外部jsファイルが読み込まない

タブレット　android4.1 chromeで

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="content-style-type" content="text/css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="robots" content="noimageindex">
<meta name="robots" content="noindex">
<title>タイトル</title>
<script type='text/javascript' src="js/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src='js/common.js'></script>
</head>

<body>
<form>
//中略
<button id="loginbtn">ログイン</button>
</form>
</body>
</html>

common.js

	$(document).on("click touchend","#loginbtn",function(event){
	event.preventDefault();
	alert(2);
	})

で、反応しません。click扱いとなります。
読み込まれていない、と判断したのですが、パスも間違っていません。
PC、iOSでは問題なく動作します。
android特有でしょうか？対策はございますでしょうか

しかし、下記のように直描きするとandroidでも問題なく動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="content-style-type" content="text/css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="robots" content="noimageindex">
<meta name="robots" content="noindex">
<title>タイトル</title>
<script type='text/javascript' src="js/jquery-2.1.4.min.js"></script>
	
<script>
	$(document).on("click touchend","#loginbtn",function(event){
		event.preventDefault();
	alert(2);
	})
	</script>
</head>

<body>
//中略
<button id="loginbtn">ログイン</button>
</body>
</html>

その他、下記も試しましたがダメでした。
common.js

	$(document).on("touchstart","#loginbtn",function(event){
	event.preventDefault();
}).on("click touchend","#loginbtn",function(){
	alert(2);
	})

行動規範の内容に同意します

回答2件

ChromeのDeveloper ToolsをAndroid上のChromeにも対応させ
不具合部分を見つけ解決に至りました。

投稿2017/11/08 13:16

u-sukesan

総合スコア156

ベストアンサー

全体を$(function(){})の中に入れていないことが原因かもしれません。

$(function(){})の中身はHTMLの構築後に実行されるので、HTML要素へのアクセスも全く問題ないですが、それを書かなければ実行のタイミングは読み込み時となるので、DOMの構築状況がタイミング次第になる、ということも考えられます。

投稿2017/11/07 23:42

maisumakun

総合スコア145183

u-sukesan

2017/11/08 00:33 編集

ご回答ありがとうございます。 $(function(){}) で囲ってみましたが、変わらずでした。ちなみに以下も試しましたが、反応なしでした $(function(){ alert("読み込みOK"); })

maisumakun

2017/11/08 00:57

ファイル名が違うとか、そういうことはありませんか？

maisumakun

2017/11/08 00:58

あと、キャッシュが残る場合もあるので、開発中は要注意です。

u-sukesan

2017/11/08 01:00

はい、androidのchromeブラウザで view-source:http://URLとしソースを開いて→ <script type='text/javascript' src='js/common.js'></script>をクリックでちゃんとリンクファイルが開きます

u-sukesan

2017/11/08 01:01

上記方法で、 <script type='text/javascript' src='js/common.js'></script>をクリックでリンクファイルを開いてリロードしているのでキャッシュは書き換わっていると思います

maisumakun

2017/11/08 01:05

パソコンのChromeとADBドライバがあれば、ChromeのDeveloper ToolsをAndroid上のChromeにも適用できますので、いろいろ追いかけてみてください。 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=ja

u-sukesan

2017/11/08 01:13

やはり、そうですよね試そうと思ったのですが、データ通信しないUSBなのか、PCに繋いでも充電はするのですが、上記remote deviceに表示されず、接続したタブレットが認識されなかったので保留にしていました。 USBを購入して試してみます

行動規範の内容に同意します

あなたの回答