Отключить клик для определенного столбца, используя Jquery

Question

Я пытался использовать Jquery, чтобы щелкнуть строку таблицы, чтобы go перейти на новую страницу. Но в моем последнем столбце есть кнопка. Для чего клик по краю переносит его на новую страницу. Во всяком случае, чтобы отключить тд onclick для этого столбца. Я попытался использовать onclick='event.stopPropagation();return false;', но это также отключило бы кнопку. Мой Jquery код ниже.

$(".myTable").on("click", "td", function(){
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id='+issueid;
  }); 

Answer 1

Это можно сделать двумя способами:

1. Попробуйте добавить event.preventDefault() вместе с event.stopPropagation().

2. Добавить отключенный класс на элемент td вручную, а затем обработайте дальнейший сценарий ios с проверкой hasClass('disabled').

Answer 2

Проблема в том, что событие click от кнопки распространяется вверх по DOM до tr, который затем передает страницу.

Чтобы это исправить, вы можете вызвать stopPropagation() в обработчике события кнопки:

$(".myTable").on("click", "td", function() {
  var issueid = $(this).closest('tr').data('issue');      
  console.log('Transferring to: viewminissues.jsp?issue_id=' + issueid);
  //window.location.assign('viewminissues.jsp?issue_id=' + issueid);
});

$('.myTable').on('click', 'button', function(e) {
  e.stopPropagation();
  console.log('Perform button action...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable">
  <tr data-issue="1">
    <td>Foo bar</td>
    <td><button>Edit</button></td>
  </tr>
  <tr data-issue="2">
    <td>Lorem ipsum</td>
    <td><button>Edit</button></td>
  </tr>
</table>

Answer 3

Вы можете исключить последние <td> из события click(), используя :not(:last), например:

$(".myTable").on("click", "td:not(:last)", function() {
  var issueid = $(this).closest('tr').find("td:eq(2) input").val();
  window.location = 'viewminissues.jsp?issue_id=' + issueid;
});