onClick table row with onClick Button and Bootstrap Modal inside

Question

I want to open a generated link, if the user click on the table row. In this row i have a delete button. If the delete button clicked i want to open the modal.

Every time i clicked on the delete button, the table row will be clicked too.

I found this but then the modal doesnt work. And i found this but there is my target everytime Null.

Why it doesn't work? And how i can solve this problem?

function show_clothing(t_row) {

  var link = $(t_row).attr('data-href');
  console.log("Redirect to : " + link);

}

function delete_clothing(btn) {

  var clothing_id = $(btn).attr('data-clothing_id');
  console.log("Delete : " + clothing_id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="show_clothing(this)" data-href="a_link">
      <td>#34</td>
      <td>
        <button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34" onclick="delete_clothing(this)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>

Answer 1

event.cancleBuble=true and others stopping following events when your button is clicked. meaning if you want to prevent clicking on row after clicking on button you have to use it. you should add initial opening of modal from javascript right after you cancleBubble.

function delete_clothing(btn) {

var clothing_id = $(btn).attr('data-clothing_id');
console.log("Delete : " + clothing_id);
event.cancelBubble=true;
$("#deleteModalCenter").modal('show');

}

Answer 2

To solve this specific problem, you can use event.stopPropagation to stop the event from reaching the parent:

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation https://api.jquery.com/event.stoppropagation/

There appears to be something weird going on with the arguments passed to your click handler. Per the documentation,

The single argument passed to the specified event handler function is a MouseEvent object. Within the handler, this will be the element upon which the event was triggered.

This gives you access to both the element and the event you want to stop from bubbling.

Here is a snippet where clicking the delete button only fires the delete handler:

function show_clothing(ev) {
  var link = $(this).attr('data-href');
  console.log("Redirect to : " + link);
}

function delete_clothing(ev) {
  var clothing_id = $(this).attr('data-clothing_id');
  ev.stopPropagation();
  console.log("Delete : " + clothing_id);
}

$('#deleteClothing').click(delete_clothing);
$('#showClothing').click(show_clothing);

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr id="showClothing" data-href="a_link">
      <td>#34</td>
      <td>
        <button id="deleteClothing" data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>

I used jQuery to handle the click event instead since it separated the JavaScript from the markup. Element.onclick would work just as well but I don't recommend using the HTML onclick attribute since it makes passing the arguments trickier and puts JavaScript directly in the HTML (poor code separation, as long as you aren't using something that promotes doing this like React).

Answer 3

this will get you only the id of the delete item, using event.StopPropagation method and using the event.target to catch the item id

function show_clothing(t_row) {

  var link = $(t_row).attr('data-href');
  console.log("Redirect to : " + link);

}

function delete_clothing(e) {
	e.stopPropagation()
  var clothing_id = $(e.target).attr('data-clothing_id');
  console.log("Delete : " + clothing_id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="show_clothing(this)" data-href="a_link">
      <td>#34</td>
      <td>
        <button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34" onclick="delete_clothing(event)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>