Table tr и td имеют странные события щелчка

Question 1

У меня есть таблица, похожая на следующий фрагмент.

$(function(){
  $('.table-price td.go-to-price').click(function(){
    console.log($(this).attr('data-link'));
    goToLink($(this).attr('data-link'));
  })

  $('.table-price tr.go-to-product').click(function(){
    console.log($(this).attr('data-link'));
    goToLink($(this).attr('data-link'));
  })
})


function goToLink(url) {
  location.href = url ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-price">
  <tr class="go-to-product" data-link="http://tahrircenter.com/product/correction-pens/url">
      <td>1</td>
      <td>10013</td>
      <td>عنوان</td>
      <td></td>
      <td>10</td>
      <td>
          <p class="">0</p>
      </td>
      <td class="go-to-price" data-link="http://tahrircenter.com/product/correction-pens/url#price-change" >
          <a href="http://tahrircenter.com/product/correction-pens/url#price-change">IMAGE</a>
      </td>
  </tr>
</table>

tr имеет атрибут data-link, а последний td имеет другой атрибут data-link, но когда я нажимаю на элемент tr, веб-сайт переходит на URL элемента td вместо элемента tr.

javascript jquery html jquery-click-event

3

S.M_Emamian 27 Июл 2017 в 19:02

Использовать событие stopPropagation

–

Anup Singh

27 Июл 2017 в 19:07

Answer

Вам нужно остановить всплытие события click при нажатии на td с помощью stopPropagation() , например:

$('.table-price td.go-to-price').click(function(e){
  e.stopPropagation();

  console.log($(this).attr('data-link'));
  goToLink($(this).attr('data-link'));
})

Надеюсь это поможет.

$(function(){
  $('.table-price td.go-to-price').click(function(e){
      e.stopPropagation();
      
      console.log($(this).attr('data-link'));
      goToLink($(this).attr('data-link'));
  })

  $('.table-price tr.go-to-product').click(function(e){
      e.stopPropagation();

      console.log($(this).attr('data-link'));
      goToLink($(this).attr('data-link'));
  })
})


function goToLink(url) {
  location.href = url ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-price">
  <tr class="go-to-product" data-link="http://tahrircenter.com/product/correction-pens/url">
      <td>1</td>
      <td>10013</td>
      <td>عنوان</td>
      <td></td>
      <td>10</td>
      <td>
          <p class="">0</p>
      </td>
      <td class="go-to-price" data-link="http://tahrircenter.com/product/correction-pens/url#price-change" >
          <a href="http://tahrircenter.com/product/correction-pens/url#price-change">IMAGE</a>
      </td>
  </tr>
</table>

3

Zakaria Acharki 27 Июл 2017 в 19:41

Не могли бы вы прокомментировать location.href = url ;, чтобы мы могли видеть, что показывает console.log() ..

–

Zakaria Acharki

27 Июл 2017 в 19:18

Я комментирую location.href = url ; и удаляю href из a;

–

S.M_Emamian

27 Июл 2017 в 19:23

Question 2