mercredi 11 février 2015

Using iCheck - event called twice on mobiles

I have a strange issue in one of my AngularJS apps. The app uses iCheck for styling checkboxes, and the issue is this: When selecting a checkbox by clicking on its label, while on a mobile phone (or a mobile emulator), the events tied to the checkbox are fired twice.


I've created a JSFiddle where you can reproduce the issue yourself: http://ift.tt/1zvdIsI



<input data-icheck data-ng-model="product.selected" id="{{product.id}}" type="checkbox" data-ng-change="callAnEvent()" />


First, take a look at how it's supposed to work:



  1. Open the JSFiddle in your browser

  2. Open the javascript console in your developer toolbar

  3. Select one of the checkboxes by clicking on the label and you will see three log items in the console log: Apply, Event called and Update


Now, let's reproduce the issue I'm trying to fix:



  1. Open the JSFiddle in a mobile emulator (try iPhone 6 for example)

  2. Open the javascript console in your developer toolbar

  3. Select one of the checkboxes by clicking on the label and you will see five log items in the console log: Apply, Event called, Update, Event called and Update


Screenshots: http://ift.tt/1AlnR0s


As you can see, the events that are logging 'event called' and 'update' to the console are triggered twice when using a mobile. Also, the checkbox is not checked. Is anyone able to figure out why this happens?


Thanks!





Aucun commentaire:

Enregistrer un commentaire