How to detect clicks on an element inside an ionic element?

Question

Using the ion list and ion element, I cannot detect the touch of an element, such as a button or div.

For example, using ng-click does not work here:

<ion-list> <ion-item ng-repeat="device in devices"> <div ng-click="deviceOption(device.id)"> CLICK HERE</div> </ion-item> </ion-list> 

Instead, I tried to use a button with ion buttons, but I don't need to use it.

Why don't we have a simple ion-button directive to detect clicks inside an ion element?

Answer 1

So the problem is with ion-item changing the z-index inner div , and the click cannot spread. You can easily get around it by changing the z-index inner div :

 <ion-content class="padding"> <ion-list> <ion-item > <div style="z-index: 1000;" ng-click="test()"> CLICK HERE</div> </ion-item> </ion-list> </ion-content> 

 angular.module('app', ['ionic']).controller('ctrl', function($scope){ $scope.test = function(){ alert('hello'); }; }) 

See "Playground": http://play.ionic.io/app/6227e101719b

Answer 2

Adding the enable-pointer-events class should do this.

 <ion-list> <ion-item ng-repeat="device in devices"> <div class="enable-pointer-events" ng-click="deviceOption(device.id)"> CLICK HERE</div> </ion-item> 

Answer 3

I had the same problem

Using "on-tap" instead of "ng-click" solved the problem!

Answer 4

The easiest way! Just change the event to "on-tap"

 <ion-list> <ion-item ng-repeat="device in devices"> <div on-tap="deviceOption(device.id)"> CLICK HERE</div> </ion-item> </ion-list>