Selecting table rows with jquery, but also selecting rows when clicking button, how do I prevent this?

Question

When you click on a table row it adds a class that changes it's appearance to reflect it's selected.

    $('#my_table tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

However, I also have some buttons in a column that let you do things specific to the row:

Item    Amount    Action
--------------------------------
Apple   10        [Buy] [Delete]
Banana  5         [Buy] [Delete]
Orange  14        [Buy] [Delete]

When I click one of the individual buttons, it also triggers the table row '.selected' class to be added, but I don't want this to occur when clicking buttons.

Mamun · Accepted Answer · 2019-06-01 04:31:51Z

2

You can use Event.stopPropagation() on button click:

$('#my_table tbody').on( 'click', 'tr', function () {
  $(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
  e.stopPropagation();
});

.selected{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <thead>
    <th>Item</th>
    <th>Amount</th>
    <th>Action</th>
  </thead>
  <tbody>
  <tr>
    <td>Apple</td>
    <td>10</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>5</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>14</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  </tbody>
</table>

edited Jun 1, 2019 at 4:31

answered Jun 1, 2019 at 4:31

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mufachir Hossain · Accepted Answer · 2019-06-01 04:33:49Z

1

You can use stopPropagation() or preventDefault() on buttons onclick event. This will prevent event bubling to parent elements of button (td, tr, table and so on). Assuming your buttons class as 'row-button' following is a sample code:

$('.row-button').on('click', function(event)){
    event.stopPropagation();
    //Do what are intended upon button click.
}

answered Jun 1, 2019 at 4:33

Mufachir Hossain

872 silver badges7 bronze badges

Comments

CertainPerformance · Accepted Answer · 2019-06-01 04:37:01Z

1

You might make sure that the td being clicked on is not in the column with the buttons. With :not, you can ensure that the matched element doesn't match a particular selector, and with :nth-child, you can specify the 3rd td in its container as the one to be excluded:

$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
  console.log('click registered');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
    <td>td 1</td>
    <td>td 2</td>
    <td><button>button</button></td>
  </tr>
</table>

edited Jun 1, 2019 at 4:37

answered Jun 1, 2019 at 4:25

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

BlueWater86 Over a year ago

Your answers are usually awesome but this teaches the OP nothing about the reasons why the refined querySelector solves his problem.

Mr Lister · Accepted Answer · 2019-06-02 17:23:10Z

0

You are experiencing a feature of the DOM called Event Propagation.

What you want to do is prevent this from occurring by calling Event.stopPropagation() in the handlers for your <td> clicks

To stop propagation with a jQuery event handler, simply return false on the last line of your td click handlers.

edited Jun 2, 2019 at 17:23

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jun 1, 2019 at 4:27

BlueWater86

1,82713 silver badges22 bronze badges

Collectives™ on Stack Overflow

Selecting table rows with jquery, but also selecting rows when clicking button, how do I prevent this?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related