Строка таблицы onClick с кнопкой onClick и начальной загрузкой внутри

Question

Я хочу открыть сгенерированную ссылку, если пользователь нажмет на строку таблицы.В этой строке у меня есть кнопка удаления.Если кнопка удаления нажата, я хочу открыть модальное.

Каждый раз, когда я нажимал на кнопку удаления, также щелкалась строка таблицы.

Я обнаруживал это , но тогда модал не работает.И я нашла это , но моя цель всегда есть нулевая.

Почему это не работает?И как я могу решить эту проблему?

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.stopPropagation, чтобы остановить событие от достижения родителя:

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

Кажется, что-то естьстранно происходит с аргументами, передаваемыми вашему обработчику кликов.Согласно документации ,

Единственный аргумент, передаваемый в указанную функцию-обработчик события, является объектом MouseEvent.В обработчике this будет элементом, для которого было инициировано событие.

Это дает вам доступ как к элементу, так и к событию, которое вы хотите остановить от всплытия.

Вот фрагмент кода, в котором нажатие кнопки удаления только запускает обработчик удаления:

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>

Вместо этого я использовал jQuery для обработки события click, поскольку он отделял JavaScript от разметки.Element.onclick будет работать так же хорошо, но я не рекомендую использовать атрибут HTML onclick , поскольку это делает передачу аргументов более сложной и помещает JavaScript непосредственно в HTML (плохой кодразделение, если вы не используете что-то, способствующее этому, например React).

Answer 2

event.cancleBuble = true и другие, останавливающие следующие события при нажатии вашей кнопки. Это означает, что если вы хотите предотвратить нажатие на строку после нажатия на кнопку, вы должны использовать ее. Вы должны добавить начальное открытие модального из javascript сразу после 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 3

это даст вам только идентификатор удаляемого элемента, используя метод event.StopPropagation и используя event.target, чтобы поймать идентификатор элемента

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>