Ion-item-sliding main (click) fires when clicking a slide button

Ionic Framework ionic-v3
1

As below I have a (click) on each item that goes to a detailed view, handled by the itemSelected() method.
Additionally, the user slides to expose Delete/Edit buttons. I want that to be an independent functionality.
What I’m finding is that itemSelected() is always called right after itemDeleted() or itemEdited(). But I am clicking on those sub-buttons, not on the main item itself. Is there a way in itemSelected() to tell where it is called from, or to prevent it being called when the sub-buttons are clicked?

  <ion-list>
    <ion-item-sliding *ngFor="let item of items" (click)="itemSelected(med)">
      <ion-item>
        ...Some item content...
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" (click)="itemDeleted(item)"><ion-icon name="trash"></ion-icon></button>
        <button ion-button color="default" (click)="itemEdited(item)"><ion-icon name="create"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
2

Did you get solution for this? As i am also facing the same problem…

3

I haven’t tried to resolve it yet myself but if I do, I will update here.

4

The solution was to move the (click)=itemSelected() from ion-item-sliding down into ion-item. Makes sense now that I think about it!

By the way, I wasn’t trying to fix the problem actively, but saw the solution while watching the Udemy ionic video by Maximillian Schwartzburger - highly recommended!

1 Like