Ionic 2 Button in Button dont work?

Ionic Framework ionic-v3
#1

Hello Im trying to create a button with an icon on the right side and that icon is also a button witch should trigger another function.
Something like this:

<button ion-item detail-none (click)="mainFunction()"> blablabla 

   //And in this button the other button
  <button ion-item detail-none (click)="secondFunction()"></button>
</button>

Well the second button gets showed fine but if i click it always the mainFunction() get fired. So the second button isnt clickable?

How can i slove that?

#2

A button is not supposed to contain another button element.
You can just arrange the button icon on the right side, next to the other button with CSS or ionic class alignments.

Or if you want to do another function after the button is clicked then you would need to add that in your .ts file.

#3

In your template add an $event Argument to your embedded buttons click handler:

<button ion-item detail-none (click)="mainFunction()"> blablabla 

   //And in this button the other button
  <button ion-item detail-none (click)="secondFunction($event)"></button>
</button>

and in your corresponding class:

secondFunction(e: event) {
   e.stopPropagation();
   //doing second buttons stuff
}

to prevent the second buttons click event from “bubbling up” to the parent button.

1 Like