Возникла проблема с функцией щелчка для <tr>

Question

HTML

<tr url="domain.com">
<td><input type="checkbox" name="checkbox[]" method="post" value="" class="checkbox" />  </td>
</tr>

JS

$("tr").not('.checkbox').click(function(){
    window.location = $(this).attr("url");

});

Хочется отключить функцию щелчка внутри clickbox, но приведенный выше код не работает: он перенаправляется, даже когда я нажимаю флажок. Где я ошибся?

Answer 1

$("tr").not('.checkbox')

Этот код будет соответствовать всем tr элементам, которые не имеют класса checkbox. Как видите, ваш tr не имеет этого класса, поэтому этот tr будет соответствовать.

Есть 2 основных подхода к тому, что вы пытаетесь сделать. Вы можете либо проверить в функции, какой был исходный элемент clicked, и не перенаправлять, если это был флажок. Или вы можете добавить обработчик щелчка к флажку и вызвать e.stopPropagation().

$("tr .checkbox").click(function(e){
    e.stopPropagation();
});

Answer 2

Остановить распространение события по флажку. Попробуйте это.

$('.checkbox').click(function(e){
   e.stopPropagation();
});

И измените свой код на

$("tr").click(function(){
    window.location = $(this).attr("url");

});

В качестве альтернативы вы можете проверить цель и действовать соответственно. Попробуйте это.

$("tr").click(function(e){
    if(!$(e.target).is(':checkbox')){
       window.location = $(this).attr("url");
    }
});

Answer 3

Просто остановите распространение событий на флажок, как показано ниже,

$('.checkbox').click(function(e){
   e.stopPropagation();
});

Исправлена ​​опечатка.

Answer 4

Добавить отдельный обработчик, который останавливает распространение.

$("tr").click(function(){
    window.location = $(this).attr("url");
})
  .find(".checkbox").click(function(e) { e.stopPropagation(); });