Button click event inside button ion-item (ionic 2)

Ionic Framework ionic-v3
1

Hi. I have

<button ion-item>
    <p>
      some text 
      <button ion-button small round outline (click)="someFunction($event);">
      </button>
    </p>
</button>

someFunction(event: Event) {
    event.stopPropagation();

    alert('test');
}

the button inside the button with ion-item directive, never triggers the click event. I tried calling stopPropagation(); but didn’t work. Tried z-index = 1000000 for the inner button, but didn’t work.

Any idea?

2

a button in a button or a p-tag in a button is invalid html…

so simple usage of

<ion-item>
  <button ion-button small round outline>
  </button>
</ion-item>

should be used.

in other cases the outer button will capure the click instead of the inner one, i think

1 Like
3

Okay. fine with that. Having ion-item as outer element was the one i had before. I just wanted the fancy click animation that is added in the button.