+1 vote
1 view
in Web Technology by (47.8k points)

I have a click event on a table row and in this row, there is also a delete Button with a click Event. When I click the delete button then click Event on the row is also fired.

Here is my code.

<tbody>

<tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)"> 

<td>{{user.firstname}}</td> 

<td>{{user.lastname}}</td> 

<td>{{user.email}}</td> 

<td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td> 

</tr> 

</tbody>

How can I prevent that the showUser Event is fired when I click the delete button in the table cell?

1 Answer

+1 vote
by (107k points)

To prevent that the showUser event is fired when you click the delete button in the table cell so the problem here is with ngClick directive which creates $event variable which is available on the same scope. This variable is a reference to JS event object and can be used to call stopPropagation():

<table> 

<tr ng-repeat="user in users" ng-click="showUser(user)"> <td>{{user.firstname}}</td>

<td>{{user.lastname}}</td>

<td> <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();"> Delete </button> </td>

</tr>

</table>

Related questions

0 votes
1 answer
0 votes
1 answer
+2 votes
1 answer
+2 votes
1 answer
0 votes
1 answer
Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...