Using iCheck - event called twice on mobiles

Question

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: https://jsfiddle.net/o6oewfff/22/

 <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: https://i.sstatic.net/7j03S.png

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!

Answer 1

Give this one a try https://jsfiddle.net/scdmuout/

I added in the below to stop it firing on the touch and click

event.preventDefault();
event.stopPropagation();