CODEWITHSUNDEEP
htmlangularjssafariangularjs-ng-click
Ben
Ben

Reputation: 303

Unable to trigger ng-click on a button when you click the button contents

I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...

This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file. 

<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
    <i class="icon icon-awesome"></i>
    <span>Awesome</span>
</button>

enter image description here

Clicking in the green or orange area works fine. The image on the right, clicking on the element in blue, doesn't trigger the click.

I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)

Upvotes: 0

Views: 1750

Answers (3)

Adi G.
Adi G.

Reputation: 21

For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:

    <button class="btn btn-default btn-xs" ng-click="myFunction()">
    <span class="glyphicon glyphicon-th-list">
    </span></button>

Hope this helps.

Upvotes: 0

Ben
Ben

Reputation: 303

I've managed to get it working using z-index. The icon and the span needed to have the position set for the z-index to have any effect.

I added the following to my .scss file.

.awesome {
  .icon {
    position: relative;
    z-index: 1;
  }
  span {
    position: relative;
    z-index: 1;
  }
}

I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

try with this:

<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
    <i class="icon icon-awesome"></i>
    <span>Awesome</span>
</a>

Upvotes: 0

Related Questions