jquery onclick event not working on td

Question

I am trying to trigger an event when I click on a td with class toggle. When I click on a td with class toggle, I want to show all the next tr with class hidethis.

But I cant seem to trigger an event on the td. Here's what I have got so far.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">  </script>
<script type="text/javascript">
$(document).ready(function () {

$(' td .toggle ').on('click',function(ev){


$(this).closest('tr').nextAll('tr .hidethis').show();


});

});

</script>
</head>
<body>



<table border="1">
<tr >
<td class="toggle">First Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 1</td>
<td>Value 2 </td>
<td>Value 3</td>
</tr>
<tr >
<td class="toggle">Second Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 4</td>
<td>Value 5 </td>
<td>Value 6</td>
</tr>
</table>

</body>
</html>

The problem is when I click on the td with class toggle the event is not firing. Please help me. May be I am not seeing something obvious. Thanks in advance.

yes that seemed to solve the problem. thanks. I feel like such an idiot — Shikhar Subedi
– Shikhar Subedi, Commented Nov 15, 2013 at 5:00

Felix Kling · Accepted Answer · 2013-11-15 04:59:33Z

1

Remove the space between the selectors, it has a specific meaning:

Selects all elements that are descendants of a given ancestor.

It should be:

$('td.toggle')

answered Nov 15, 2013 at 4:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roopendra · Accepted Answer · 2013-11-15 04:59:33Z

1

Remove space between td and toggle

$(' td .toggle ').on('click',function(ev){

to

$('td.toggle').on('click',function(ev){
    ^

and also same problem with your below code:-

$(this).closest('tr').nextAll('tr .hidethis').show();

to

 $(this).closest('tr').nextAll('tr.hidethis').show();
                                  ^

Working Demo

answered Nov 15, 2013 at 4:59

Roopendra

7,77716 gold badges72 silver badges95 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-11-15 04:59:52Z

1

Simply try like

$(document).ready(function () {
    $('.toggle').on('click',function(ev){
       $(this).closest('tr').nextAll('tr .hidethis').show();
    });
});

Or remove the space between the td and its classname

$('td.toggle').on('click',function(ev){

answered Nov 15, 2013 at 4:59

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Collectives™ on Stack Overflow

jquery onclick event not working on td

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related