row event fires before than event attached to element inside row

Question

I have one event attached to on row click and one event attached to on checkbox change inside the row.

How to prevent that row click is fired first?

$(document).on('click', 'table tr', function() {
  console.log('row');
})

$(document).on('change', 'table tr input[type="checkbox"]', function() {
  console.log('chk');
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <input type="checkbox">
      </td>
    </tr>
  </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>

score 2 · Answer 1 · answered Feb 12 '19 at 18:12

Change the event you're handling on the inner element from change to click.

The change event doesn't fire until after the click event. The click event is triggered on the checkbox, then bubbles out to the row. When that completes, the change event is triggered on the checkbox.

$(document).on('click', 'table tr', function() {
  console.log('row');
})

$(document).on('click', 'table tr input[type="checkbox"]', function() {
  console.log('chk');
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <input type="checkbox">
      </td>
    </tr>
  </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>

score 0 · Answer 2 · answered Feb 12 '19 at 17:59

0

Add click event for checkbox also to stop event propagation.please check this out for the hint.

https://stackoverflow.com/a/54550360/3729024

answered Feb 12 '19 at 17:59

Himen Suthar

80
1
3
11

He didn't say to prevent the even firing on the row, he just wants to change the order. – Barmar Feb 12 '19 at 18:13

score 0 · Answer 3 · answered Feb 12 '19 at 18:23

Using jquery selector :not to exclude checkbox for a tr click and then stop propagation of a child element event to the parent tr.

$(document).on('click', 'table tr :not(input[type="checkbox"])', function(e) {
  console.log('row');
});

$(document).on('click', 'table tr input[type="checkbox"]', function(e) {
  console.log('chk');
  e.stopImmediatePropagation();
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>another td</td>
    </tr>
  </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>

row event fires before than event attached to element inside row

3 Answers3