テーブルtrとtdには奇妙なクリックイベントがあります

Question

私は以下のスニペットショーのようなテーブルを持っています。

$(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要素をクリックすると、ウェブサイトがtd要素のURLにナビゲートtr要素。あなたが好き、あなたがstopPropagation()を使用してtdをクリックすると、バブリングからclickイベントを停止する必要が

Answer 1

：

$('.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>