Ionic-framework: No click event on icon

Created on 21 May 2014 · 18Comments · Source: ionic-team/ionic-framework

If I add only icon it doesn't recieve click events on android 4.1:

or
<a ng-click="alert('none');"></a>

This recieves event on text only:
<a ng-click="alert('none');"> Text</a>

Source

piernik

😕1

Most helpful comment

I was able to get this working wrapping the icon with a and the on-tap zhuhu mentioned earlier:

aiouy on 22 Apr 2015

👍3

All 18 comments

Try:

<a class="button button-clear" ng-click="something()">
  <i class="icon ion-help-circled"></i>
</a>

ajoslin on 21 May 2014

That works but makes padding that I don't want to

piernik on 21 May 2014

piernik, were you able to remove the padding?

perrygovier on 28 May 2014

I've iggnored icon and set text as well <a ng-click="alert('none');">Get help </a> so problem is not solved, but I do know how to get rid of padding ;)

piernik on 28 May 2014

I believe this is because the actual image is a pseudo element. @adamdbradley would our click modifications fire on a pseudo element?

@piernik, could you put together a quick codepen for us to test against?

perrygovier on 29 May 2014

Looks like its a quirky Android 4.1 thing. I was able to replicate it on 4.1, but not 4.2. In your case, since you do not want to use a button and override the padding, you can instead add a background color and then the whole element is clickable. Thanks

adamdbradley on 3 Jun 2014

The only thing that worked for me was to was to change the event to ng-mouseover. Works fine on mobile devices, does not work in a browser (ionic 1.2.5; Chrome 32 on Ubuntu 14.04).

fafk on 28 Oct 2014

I am unable to get an ng-click on an icon. I can see "activated" added to classes but no action.
v1.0.0-beta.13, testing in Chrome.

I have tried both wrapping it in an and without the wrap.

    <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search" ng-model="qt" ng-change="doSearch(qt)">
        <a class="button button-clear" ng-click="closeSearch()">
            <i class="icon ion-close pull-right" ng-click="closeSearch()"></i>
            </a>
    </label>

Will appreciate help.

dineshgh on 10 Dec 2014

How about using "on-tap"?

ghost on 15 Jan 2015

I can confirm this while testing in Chrome. Even when wrapping with other elements, the parent elements will not fire.

tannerlinsley on 24 Jan 2015

I'm having this issue as well. Are you guys doing an e.preventDefault() on  targets?
Tested on beta 14 nigthly 995

Update: I have it working replacing the parent <label> with a <div>

As @mhartington explains here: http://forum.ionicframework.com/t/cannot-tap-click-a-clear-search-icon-inside-an-input-label/4237/7

Thing to remember about how ionic deals with setting focus to inputs:

We use labels to to watch for any tap events, then check to see if that label has an input inside of it. If so, set focus to the input.

To use a button along the input, swap the label to a span or div, your ng-clicks will work fine after that.

FdezRomero on 9 Feb 2015

👍2

I was able to get this working wrapping the icon with a and the on-tap zhuhu mentioned earlier:

aiouy on 22 Apr 2015

👍3

I'd like to put a big green checkmark next to the comment from FdezRomero. Thanks!

cosnofski on 3 Oct 2015

Got same issue today. Changing event handler to 'on-tap' worked.

ladmerc on 20 Jun 2016

'on-tap' works. Kudos

Emmarex on 15 Jul 2016

on-tap did not work for me. Had to use ng-click for it to work on Android 4.1.2.

<a ng-click="substract()"></a>

miparnisari on 26 Sep 2016

@FdezRomero Changing the label element to a div fixed it for me. ty

jackvial on 6 Sep 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.