Make button in ion-item clickable without clicking the item itself

ionic-v1
1

How can i make button in ion-item clickable without clicking the item
I know you can use normal <div class="list"> and <div class="item"> to achieve this
and i don’t want to use ion-option-button as they are for other use
but i need the ion-item functions to work as well. please help,
When i click on the button, it will actually click on both the button and the item
my html code below

<body ng-app="app" ng-controller="MyCtrl">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content class="padding">
  <ion-list>
    <ion-item class="item-button-right" ng-click="sayGoodby()" style="height:50px">
      <button class="button button-assertive" ng-click="sayHello()">I'm a button</button>
    </ion-item>
  </ion-list>
  </ion-content>
</ion-pane>
`
2

this is resolved by adding $event.stopPropagation() to the ng-click

ng-click=“sayHello(); $event.stopPropagation();”

3 Likes
3

Thank you! You just saved me a lot of time.

4

No Problem, i wasted alot of google time and could not find any answers to this previously, until i give up and asked my japanese friend for solution, he search on japanese site and just add this stupid line to my code and it works. almost wanted to smash my Macbook air at that time

glad to know it helps you

1 Like
5

This deserves +100 :smiley:

1 Like