テストしたすべてのデバイス (すべてのデスクトップ ブラウザー、iPhone、iPad、Samsung Galaxy Tablets Chrome ブラウザー) で動的に作成されたリンクが機能するが、Android でクリックすると機能しないという問題があります。携帯電話 (Chrome を実行している 3 台の Android 携帯電話でテストしました。申し訳ありませんが、Chrome バージョンはありませんが、1 台の携帯電話は本当に新しく、他の携帯電話はせいぜい 1 ～ 2 年前のものです)。
アイテムをカート (より大きな動的に作成されたエンティティ内) にループで追加するためのリンクを動的に作成しています。
問題のリンクは、基本的に次のように構成されています。
var itemHTML = "";
...
itemHtml += '<a href="'+gAddLink+'" class="add2Cartlink">...</a><span>\n'
...
gAddLink は単なる標準の URL です。次に、document.write() を使用して、(他の HTML に加えて) その itemHTML を動的にページに挿入します。
これはページの読み込み時に動的に作成されるため (理由はこの質問の範囲外ですが、必須です)、次のようにクリック ハンドラーを設定する必要があることがわかっています。
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
「.elementToInsertTo」は、動的に作成されず、ページの読み込み時にページに存在する親要素です。これらの親は複数あるため、要素 ID を使用できないのはなぜですか。しかし、それが違いを生むとは思わないでください。
繰り返しになりますが、このクリック リスナーの関数呼び出しは、Android フォンを除くすべての場所で機能することが確認できます (私の知る限り)。なぜこれが考えられるのでしょうか？私は一日中 StackOverflow ページを読んできましたが、これに関連するものは何もないようです。私はJSクロージャー（まだ問題である可能性があります）などについてたくさん読んだことがありますが、リンククリックリスナーは私がテストしたほとんどすべてのデバイスで動作しているため（AndroidタブレットのChromeでさえ）ブラウザ、これは私にとって本当に混乱している部分です）。
この問題を以前に見たことがある場合、またはなぜこれが起こっているのか考えられる場合は、次の部分を読む前にそれを書いて、混乱したり偏見を持たないようにしてください.
わかりました、さらに気が遠くなる部分ですが、これがこれを理解するのに役立つだけで、状況を混乱させないことを願っています..電話の1つをUSBでコンピューターに接続し、を使用してリモートデバッグを行いましたここで説明されている Chrome 開発者ツール ( https://developers.google.com/chrome-developer-tools/docs/remote-debugging )。クリックリスナーが機能していないことを確認できました（トリガーされていませんでした）...（そして、ここでクレイジーな部分が来ます）UNTILリンクでいくつかの要素の検査を行いました (つまり、ブラウザーで DOM 要素を検査していたときにリンクが携帯電話で強調表示され、再び Chrome 開発ツールを使用しました)、リンクをクリックしました。これにより、クリックリスナーが機能するようになりました! 何？？さらにデバッグするために、ページ上のいずれかの DOM 要素を調べてリンクをクリックすると、クリック リスナーが機能しました。開発ツール タブからタブを変更したり、Chrome 開発ツールで DOM 要素の検査をやめたりすると、リンク クリック リスナーが機能しなくなりました。これをどう解釈すればいいのか本当にわかりませんが、この部分の情報が Android フォンとクリック リスナーで何が起こっているのかを絞り込んでくれることを願っています。
現時点ではテスト用の Android フォンを持っていませんが、他の情報を提供できることを嬉しく思います。
ありがとう！