Button click inside ion-item not working

Ionic Framework ionic-v3
1

Hi,

I have an ion-list that contains ion-items:

<ion-list>
<ion-item (click)="myClickHandler()">
<button ion-button (click)="myButtonClickHandler()">button</button>
</ion-item>
</ion-list>

Since I updated to RC.3, the button click handler is not raised any more. Only when I remove the click handler from the ion-item, the button click handler is called. Is this a bug? Or am I doing something wrong? But it used to work as expected…

Joachim

1 Like
2

From the Item docs:

A basic item should be written as a <ion-item> element when it is not clickable.

and

The attribute ion-item should be added to a <button> when the item can be clicked or tapped.

2 Likes
3

I’m seeing similar behavior with RC.3 with the menu button to activate the side menu and also the back button. Clicking directly on the button doesn’t do anything but clicking about 20 pixels to the right of the button activates it. That “hot” area on the right is about 5 pixels wide. The same code worked in RC.2.

I opened an issue a about this since the same behavior occurred with the latest ionic-conference-app.

4

Have you tried this? It doesn´t work here. I can add the ion-item to my button, but it is only clickable if the parent ion-item has no click event registered (actually same behaviour as without the ion-item attribut on button). The only thing the ion-item attribute on the button does seems to be styling (bigger clickable area)

5

<button ion-item (click)="onClick()"> works fine for me with ionic-angular@2.0.0-rc.3.

But you have two elements (an item containing a button) one inside another and they both handle the click event? Not sure that makes much sense.

6

Well, my scenario is that I have an ion-list with ion-items. When clicking on an item (100% width), the item gets marked as selected. Every item can contain subitems and therefore I have an expand toggle-button at the left side of each item which is a button that also has a registered click event.

This worked very naturally until I updated to rc.3…

7

Seems to work fine here: http://plnkr.co/edit/dSC56s

No difference between rc2 and rc3.

1 Like
8

@Joachim
add a item-content attribute to your button

9

You are right, that works. And you brought me closer to my real problem :slight_smile:
In my setup I actually use a ion-grid to layout the content of the ion-item. And if i put the button in an ion-grid/ion-row/ion-col then also in your plunker only the ion-item event is raised.

Thank you very much for setting this up!

Joachim

10

still the same… :frowning:

11

may be you try it in the wrong area
check this plunker

12

very strange…I have my template code exactly as you have:

<ion-content padding>
  <ion-list>
    <div *ngFor="let item of vlAdapter.lists" ion-item (click)="itemClicked($event)">
      <ion-grid ion-content>
        <ion-row>
          <ion-col>
            <button ion-button (click)="toggleDetail()">+</button>
          </ion-col>
          <ion-col>
            <div>{{i}}</div>
          </ion-col>
          <ion-col>
            {{item.headline}}
          </ion-col>
          <ion-col>
            ({{item.versList.length}})
          </ion-col>
        </ion-row>

but it is still not working. Now when I compare your rendered page versus mine, I find that yours is rendered like this:
>


>
>
>
>
> Item 1
> Edit

>
>
>

whereas mine is rendered like this:

> <div class="input-wrapper"><!--template bindings={
>   "ng-reflect-ng-if": "true"
> }--><ion-label class="label label-md">
>       <ion-grid ion-content="">
>         <ion-row>
>           <ion-col>
>             Hallo!<button ion-button="" tappable="" class="button button-md button-default button-default-md"><span class="button-inner">+</span><div class="button-effect"></div></button>

in your code ion-label and ion-grid are siblings, in my code ion-label is the container for ion-grid…I am at a loss now, I don´t understand how my template causes this…

13

Dear o dear :smile:

not ion-content it’s item-content

2 Likes
14

puhhh!:grin: thanks a lot!!

15

I kept running into the same problem.

Button elements inside a clickable ion-item only work if they have “item-right” or “item-left” attributes. If you have a button in the body of the item then it will not respond to click events.

16

Hey Buddy, I have gone through such problem few months back, I also had a button inside the ion-item. Then I came across the solution to use a “ion-stop-event=“click”” ionic directive .
So the code snippets would be like:

<button ng-class="{‘button button-full’: !newsData.isArchive, ‘button button-full icon ion-checkmark’: newsData.isArchive}"
ion-stop-event="click"
ng-disabled="newsData.isArchive"
ng-click=“archiveButtonClick(newsData)”>
ARCHIVE

2 Likes
17

thank you for this hint! I will keep it in my mind…for now I have changed my layout to plain divs instead of ion-item…

18

I think you are referring to ionic 1
I am already using event.stopPropagation() in my event handler (ionic 2), but thanks anyway.

Joachim

1 Like
19

I believe the answer to that issue is to use the tap event and not the click event.

How about if button ion-item were to be used a ion-nav item?

20

every thing under book method working except not pushing post request.button is clickable.