5

インダッシュ カー ユニット用に HTML5/JavaScript で記述されたアプリがあります。これは、さまざまなイベントに応答してメイン ページの div にフラグメントが読み込まれる「単一ページ」アプリです。

マーケティングやプレゼンテーションなどに使用できるように、ブラウザーに移植するように依頼されました。

これは大したことではないように思われました。適応することはほとんどなく、すべてのブラウザーで同じように表示されるように CSS を調整する必要があっただけです。次に、Web アプリを実行するデバイスを iPad にすることにしました。

このアプリは Safari でうまく機能したので、Mobile Safari で問題が発生するとは思いませんでした。そうではないことがすぐにわかりました。Mobile Safari ではアプリがまったく動作しません。基本的に、私のクリックイベントはどれも発生していません。その上、他のブラウザでは表示されない一貫性のないエラー メッセージがコンソールに表示されます。

TypeError: 'null' はオブジェクトではありません

このサイトを見て回ると、どの jQuery バインディングが機能し、Mobile Safari が機能し、どれが機能しないかについて、矛盾するレポートが表示されます。そこで、私は自分の実験を設定することにしました。

リンクが 1 つのページの作成:

<a class="mylink">CLICK ME</a>

次に、これらのバインディングをそれぞれ試しました。

$("a.mylink").click(function () { console.log("click worked"); });
$("a.mylink").bind("click", function () { console.log("bind worked"); });
$("a.mylink").live("click", function () { console.log("live worked"); });
$("a.mylink").on("click", function () { console.log("on worked"); });

コンソールで応答を得たのは .live() だけでした。それでも、それは非常に一貫性がなく、通常はクリックでスパムを送信する必要がありました.

リンクを編集して onclick 属性を次のように追加すると:

<a onclick="function(){}" class="mylink">CLICK ME</a>

その後、 .live() は一貫して機能しますが、他のバインディングはまだありません。非常に多くのアプリが Mobile Safari で問題なく動作するため、これは正気ではないように思えます。ここで私が見逃している明らかなものはありますか？

注意してください、私はjQueryの使い方を知っているので、誰かが尋ねる前に、そうです、私のバインディングは$(document).ready().
また、href が添付されるとリンクが正常に機能することはわかっていますが、これは単一ページのナビゲーション アプリであり、href を添付すると iOS でバインディングが完全に無視され、完全なページ ナビゲーション。

4

2 に答える 2

10

クリックする要素にaを追加するhref="#"か、aを配置する必要があります。cursor:pointer

これがテストです（iPad 3で）：http://jsfiddle.net/dZqyU/2/

<a class="clickable">I have no href :( (I dont work in iPad)</a>
<br/>
<br/>
<a class="clickable" href="#">I have href :) (I work in iPad)</a>
<br/>
<br/>
<a class="clickable cursor">I have cursor, no href :) (I work in iPad)</a>

$(document).on('click','.clickable',function(){
    alert($(this).text() + 'and the binding worked :)');
});

.cursor{
cursor:pointer;
}

私が推測する問題は、一部の iOS Safari バージョンでは、属性のないaアンカー タグがクリック可能な要素として識別されないことです。hrefただし、カーソルclickableを追加または追加して明示的に作成すると、機能します。ここに関連リンクがあります。hrefpointer

于 2012-08-31T00:38:44.443 に答える
1

前の回答の状態は正しくありません。私はテストし、iPhone でバインドのみを使用して、インライン JavaScript なしで達成しようとしているものを実装することができました。私の推測では、どこかに小さなタイプミスがあり、jQuery の魔法のように正常に機能を低下させることができるため、エラーが呼び出されることはありません。

エラーについて私が言ったことは正しくないと仮定すると、アンカーに href="#" を追加してから event.preventDefault() を使用することです [また、event.stopImmediatePropagation を追加する必要があるかもしれません()] をコードに追加します。

あなたのコードにバグがある可能性が非常に高いようです (おそらく、まったく別の、無関係などこかに)、デスクトップの Safari は親切にもあなたのために見つけ出し、見落としたり修正したりしましたが、私の経験では、モバイルのサファリははるかに寛容ではありません。

于 2012-08-31T02:35:14.410 に答える