車のインダッシュ ディスプレイ ユニット用に作成した HTML5/JavaScript アプリを持っており、ブラウザーで実行するために移植するように依頼されました。
簡単な作業で、いくつかの簡単な変更を加えたところ、試したすべてのデスクトップ ブラウザーですべてが正常に動作するようになりました。
その後、問題が発生しました。デモンストレーション目的で、iPad で実行できることを具体的に確認するように依頼されました。
問題：
アプリは単一ページ ナビゲーションを使用し、jQuery.load を使用して、ユーザーがさまざまな「画面」に移動するときに必要なページ フラグメントを読み込みます。ただし、すべての jQuery バインディングは 1 か所に集中しているため、バインド先の要素がまだ DOM に存在していなくても、アプリの起動時に実行されます。
jQuery.live または .on を使用すると、将来の DOM 要素にバインドできるため問題ありません。少なくともデスクトップ ブラウザでは。
Mobile Safari では、.live/.on は、まだ存在しない要素へのバインドには機能しません。
ここにこの問題を説明する例があります: http://dhines.com/jquery-test/
すべての「SHOULD WORK」リンクはデスクトップ ブラウザでは機能しますが、Mobile Safari では機能しないことに注意してください。
Web と SO を見回すと、私が見つけた唯一の解決策は、クリック可能なすべての要素に onclick="function(){}" を追加することです。これはばかげているようです。
私が考えるもう 1 つのオプションは、バインディングを分散化し、それらが適用される特定のフラグメントで実行することですが、大量のフラグメントとバインディングを考えると、これは楽しくありません。
私の例を見て、誰かが私にもっと良い解決策を提供できますか? それとも、.load を間違って使用しているかどうかを指摘してください。