Button inside clickable row is activating the row highlight

user_13571628 0
Viewed 669

I have a Bootstrap table that is just a clickable row. I put a button in that row which is going to be a href to another location. When I click on the button, the row is activated and gets highlighted.

I am reading that I need to stop pagination use jQuery however I am not sure how to do that. This is my current jQuery that is used to toggle the clickable row.

$(document).ready(function() {
            $('.myTable').on('click', '.clickable-row', function(event) {
                $(this).toggleClass('table-warning');
            });
        });

I am not sure what needs to be added so that my row does not get highlighted when click on the button

EDIT:

<table class="table table-hover" id="myTable">
  <thead>
    <tr class="clickable-row">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td><a class="btn btn-primary" href="#" target="_blank" role="button">Link</a></td>
    </tr>
  </tbody>
css html jquery javascript
1 Answers

You may have read that you need to stop propagation, not pagination. To stop propagation means to prevent further propagation of the current event in the capturing and bubbling phases. Applied to your example, it means that a click on the button in the table won't be also counted as click on the row. More info on stopPropagation(). Note that I've also added event.preventDefault(); in the example as it would result in opening a broken link. Omit this in your real code when you add a link address to the button.

$(document).ready(function() {
  $('#myTable').on('click', '.clickable-row', function(event) {
    $(this).toggleClass('table-warning');
  });
  
  $('#myTable').on('click', '.btn', function(event) {
  event.preventDefault();
  event.stopPropagation();
  $(this).parent("td").toggleClass("clicked");
  });
});
.table-warning {
  background-color: yellow;
}
.clicked {
  background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover" id="myTable">
  <thead>
    <tr class="clickable-row">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td><a class="btn btn-primary" href="#" target="_blank" role="button">Link</a></td>
    </tr>
  </tbody>
  </table>

user_39431250
Related