Tr and td table have strange click events
I have a table similar to the following snippets.
$(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
has an attribute data-link
and the latter td
has a different attribute data-link
, but when I click on an element tr
, the website goes to the url of the element td
, instead of that element tr
.
source to share
You need to stop click
the bubble event when you click on td
using for example: stopPropagation()
$('.table-price td.go-to-price').click(function(e){
e.stopPropagation();
console.log($(this).attr('data-link'));
goToLink($(this).attr('data-link'));
})
Hope it helps.
$(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>
source to share