iPhoneのSafariでJavaScriptが動かない

Question

###前提・実現したいこと
iPhone 6 Plus（バージョン9.3.2）のSafariでJavaScript（タブ切替、インクルード）を動かしたい。

###発生しているエラー
0. タブ切替が動かない
0. インクルードファイルが読み込まれない
###試したこと

• PC（Chrome）のデベロッパーツールで確認した際は、正常に動作している。
• Android（バージョン4.4.2）のChromeでも正常に動作。
• iPad（バージョン10）のSafariでも正常に動作。
• CSSにcursor:pointer;を追加してみたが、動作せず。

###該当のソースコード

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#textArea>div").hide();
				
				var select_id = 1;
				$("#btn_" + select_id).addClass("selected");
				$("#txt_" + select_id).show();
			
				$('#tab').on("click touchstart", "li:not(.selected)",function() {
					//---クリックされたIDの取得
					var click_id = this.id.split("_")[1];
					
					//---選択されていたIDの処理
					$("#btn_" + select_id).removeClass("selected");
					$("#txt_" + select_id).hide();
					
					//---クリックされたIDの処理
					$("#btn_" + click_id).addClass("selected");
					$("#txt_" + click_id).show();
					
					//---IDの記憶
					select_id = click_id;
				})

							
			})			
		</script>

<section id="tab">
 <ul class="tabs">
  <li id="btn_1">A</li>
  <li id="btn_2">B</li>
 </ul>
 
<div id="textArea">
 <div id="txt_1">
  Aの内容
  <!-- includefile -->
   <div class="exsample"></div>
   <script type="text/javascript">
     $(document).ready(function() {
     $('.exsample').load('exsample.html');
     });
   </script>
  <!-- includefile -->
 </div><!-- //END txt_1 -->

 <div id="txt_2">
  Bの内容
 </div><!-- //END txt_2 -->
</div><!-- //END textArea -->
</section><!-- //END tab -->

#tab ul li {
	display: inline-block;
	width: 45%;
	margin: 0px 0px 0px 5px;
	padding: 20px 0;
	color: #999;
	font-size: 1.5em;
	background-color:#ddd;
}
#tab ul li.selected {
	color: #000;
	background-color:#fff;
	border: 1px solid;
	border-color: #000 #000 #fff #000;
}

他必要な情報等ありましたらご指摘願います。
何卒ご教授賜りますようよろしくお願いいたします。

Answer 1

あれから色々と原因を探っていたところ、どうやらAの内容で呼び出しているインクルードファイル（exsample.html）が邪魔をしていたようです。
中身はテキストのみだったので何が邪魔をしていたのか不明ですが、同じ内容でファイルを作り直したところ正常に動作しましたので、とりあえずは解決ということにさせていただきます。

アドバイスをくださったお二方、ありがとうございました。

Answer 2

このように変更してみてはいかがでしょうか？
一応私の環境では動作いたしました。

$(function(){

	$("#textArea>div").hide();
	
	var select_id = 1;
	$("#btn_" + select_id).addClass("selected");
	$("#txt_" + select_id).show();
	
	$('.tabs li').on("click", function() {
		
		//---クリックされたIDの取得
		var click_id = $(this).attr('id').split("_")[1];
		
		//---選択されていたIDの処理
		$("#btn_" + select_id).removeClass("selected");
		$("#txt_" + select_id).hide();
		
		//---クリックされたIDの処理
		$("#btn_" + click_id).addClass("selected");
		$("#txt_" + click_id).show();
		
		//---IDの記憶
		select_id = click_id;
	});
});

Comments

[Mudkip]

masayoshi0222さん
アドバイスありがとうございます。
試してみましたが、タブ切替もインクルードも動作せずでした。
iPhone自体の再起動もかけてみましたが、変わらず･･･。
ただ、iPadでは動作しているとなるとバージョンが要因なのでしょうか？

Answer 3

clickのところ、touchで試したらどうなりますかね。

$('#tab').on("touch touchstart", "li:not(.selected)",function() {

Comments

[Mudkip]

fromageblancさん
アドバイスありがとうございます。
試してみましたが、残念ながら動作せずでした･･･。

[fromageblanc]

あとは、CSSで cursor: pointer を指定すると発火するみたいな記事がネットにけっこうありますね。試してみてはいかがでしょうか。

[Mudkip]

fromageblancさん
cursor: pointer も試してみましたが、動作せずでした。しかし、これに関する記事がいくつか出てきましたので色々試してみます。ありがとうございます。