How to trigger event only when i click table row but not when i click table row element

Question

Here i am adding a class to row which i am clicking on. the issue i am facing is i have a text box and dropdown field inside a table. but when i click on textbox or dropdown to input value the function is getting triggered. what i exactly want to do is when i click on the row then the class should added, when i click on the element inside the table row the class should not get added.

how can i do this?

here is what i have done.

<script>
var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        $(this).addClass('selected');
    })
</script>



<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Answer 1

Check to see if what is clicked on is the cell or the input with the events target

 var taBody = $('.extab tbody') taBody.on('click', 'tr', function (evt) { if($(evt.target).is('td')) { $(this).toggleClass('selected'); } }) 

 .selected{ background: red; } td{ padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table> 

Answer 2

I have added padding on td for better illustration. And this works perfectly fine as you need.

 var tabRow = $('.extab tbody tr'); tabRow.on('click',function(){ $(this).addClass('selected'); }) $('.extab tbody tr td *').click(function(e){ e.stopPropagation(); }); 

 .selected{ background: red; } td{ padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table> 

Answer 3

You can do it like :

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

---

 var tabRow = $('.extab tbody tr'); tabRow.on('click',function(){ console.log('row clicked'); $(this).addClass('selected'); }); $('.extab tbody tr td *').click(function(e){ e.stopPropagation(); }); 

 tr td { padding: 5px; background-color : red; } tr.selected td { background-color : blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table>