AngularJS アプリの 1 つに奇妙な問題があります。アプリはチェックボックスのスタイリングに iCheck を使用しますが、問題は次のとおりです。携帯電話(またはモバイル エミュレーター) でラベルをクリックしてチェックボックスを選択すると、チェックボックスに関連付けられたイベントが 2 回発生します。
問題を自分で再現できる JSFiddle を作成しました: https://jsfiddle.net/o6oewfff/22/
<input data-icheck data-ng-model="product.selected" id="{{product.id}}" type="checkbox" data-ng-change="callAnEvent()" />
まず、それがどのように機能するかを見てみましょう。
- ブラウザで JSFiddle を開きます
- 開発者ツールバーで JavaScript コンソールを開きます
- ラベルをクリックしてチェックボックスの 1 つを選択すると、コンソール ログに次の 3 つのログ項目が表示されます: Apply、Event called、およびUpdate
それでは、修正しようとしている問題を再現しましょう。
- モバイル エミュレーターで JSFiddle を開きます (たとえば、iPhone 6 を試してください)。
- 開発者ツールバーで JavaScript コンソールを開きます
- ラベルをクリックしてチェックボックスの 1 つを選択すると、コンソール ログに次の5 つのログ項目が表示されます: Apply、Event called、Update、Event called、およびUpdate
スクリーンショット: http://i.stack.imgur.com/7j03S.png
ご覧のとおり、「呼び出されたイベント」と「更新」をコンソールに記録しているイベントは、モバイルを使用すると 2 回トリガーされます。また、チェックボックスはチェックされていません。なぜこれが起こるのか誰でも理解できますか？
ありがとう！