Question 196706 in Javascript Question posted in
A very good W3school tutorial can be found here.

cancel/disable window.location in JavaScript

I link every row in my table with js

<tr class="clickable-row" data-row-id="{{$Offer->offer_nr}}" data-href='link'>

$(".clickable-row").click(function() {
  window.location = $(this).data("href");
});

In my last cell, in every row, I have a button to open a modal. How can I cancel the window.location in JavaScript when I click the button to open my modal?

I made the last cell in my row unclickable with CSS:
pointer-events: none;
but the button is then also unclickable

I tried also to stop the window.location when I click on the button with

 $(document).on('click', '.delete-record', function (e) {
    e.preventDefault();
 }
Tags:

3

Answers


  1. 0

    You don’t want to prevent the default action (which is nothing for a click on a table cell), you want to stop the event propagation (jQuery):

    $('.delete-record', function (e) {
    e.stopPropagation();
});

    This will cause your handler on .clickable-row to simply not trigger.

    Login or Signup to reply.
  2. 0

    You can detect if the button was clicked using the target of what was clicked.

    $(".clickable-row").click(function(e) {
  const deleteClicked = e.target.closest('.delete-record');
  if (deleteClicked) {
    // call delete modal if you want
    return false;
  } 
  // window.location = $(this).data("href");
  console.log($(this).data("href"));
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="clickable-row" data-href="a">
      <td>a</td>
      <td><button class="delete-record">X</button>
    </tr>
    <tr class="clickable-row" data-href="b">
      <td>b</td>
      <td><button class="delete-record">X</button>
    </tr>
  </tbody>
</table>

    or you can stop the event from going down the tree, but you can not use event delegation on the document because the event has already been fired on the row by the time it gets to the document. So you would need to bind to the buttons directly.

    $(".clickable-row").click(function(e) {
  // window.location = $(this).data("href");
  console.log("clicked row:", $(this).data("href"));
});

$(".delete-record").click(function(e) {
  e.stopPropagation();
  console.log("clicked button");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="clickable-row" data-href="a">
      <td>a</td>
      <td><button class="delete-record">X</button>
    </tr>
    <tr class="clickable-row" data-href="b">
      <td>b</td>
      <td><button class="delete-record">X</button>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  3. 0

    Here’s a possible solution.

    $('table').on('click', 'tr', function(e){
    if (e.target.tagName == "BUTTON"){
    console.log("clicked button");
  }else{
    //window.location = "whatever";
    console.log("clicked row");
  }
    

});

$('table button').on('click', e => {
    console.log('button');

});
    td{padding:10px}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr><td>A1</td><td>B1</td><td><button class="delete-record">click1</button></td></tr>
<tr><td>A2</td><td>B2</td><td><button>click2</button></td></tr>
<tr><td>A3</td><td>B3</td><td><button>click3</button></td></tr>
<tr><td>A4</td><td>B4</td><td><button>click4</button></td></tr>

</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search