jQuery .click function not working on < td > tag?

Question

So I am creating a table using Javascript and jQuery, and I want it so that when you click the td's on the first row of the table, then the rest of the td's in that column drop down. Let me try to explain it by showing my code. Here is my Javascript:

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

This basically creates td's and each td is similar to this format

<td class="rowh columni">

I want it so that all td's are hidden except for the td's in .row0 and if you click the td in .row0 .columni, then all td's in .columni appear. The parameter 'heights' is jsut an array, for example, it can be

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

and it would create a table using those words, headerOne and headerTwo would be in the first row, someTd and anotherTd would be in the second row.

Now, when I try to add a click function like so

function animation() {
    $('td').click( function() {
        alert('clicked');
    });
}

and then call it in my document.ready function like so

$(document).ready( function() {

    createTr(heights);
    animation();
});

it doesn't do anything when I click a td. How come?

Churchill · Accepted Answer · 2013-10-28T17:35:56.073

53

http://api.jquery.com/on/

Since you are creating the elements after the DOM has been created. Use the "on" selector to get the precise element that is dynamically created.

From the URL:

   $("#newTable").on("click", "td", function() {
     alert($( this ).text());
   });

edited Oct 28 '13 at 17:35

answered Oct 28 '13 at 17:27

Churchill

1,587
5
27
39

hm what do you mean by #newTabletbody? I tried $("#newTable").on and that didn't work. – SilentDev Oct 28 '13 at 17:34
Sorry that was a typo. You can try $('body').on('click if that doesn't seem to work. – Churchill Oct 28 '13 at 17:36
hm $('body').on('click' also doesn't work. I am putting all of the code in the function called animation, like so -- function animation() { $('body').on('click', 'td', function() { alert('clicked'); }); } -- but it still doesn't seem to work. – SilentDev Oct 28 '13 at 17:38
okay it works only if I place it before the $(document).ready(function – SilentDev Oct 28 '13 at 18:06

Ankit Tyagi · Answer 2 · 2013-10-28T18:12:31.367

7

Try like this :

$('body').on('click','td', function() {
        alert('clicked');
    });

edited Oct 28 '13 at 18:12

answered Oct 28 '13 at 17:31

Ankit Tyagi

2,381
10
19

1

if you delete the extra '(' after the 'td' then it works only if I place it before the $(document).ready( function. – SilentDev Oct 28 '13 at 18:07

score 2 · Answer 3 · answered Oct 28 '13 at 18:01

2

try this

function animation() {
    $(document).on('click','td',function() {
    alert('clicked');
    });
}

answered Oct 28 '13 at 18:01

Anto Subash

3,140
2
22
30

Is there supposed to be that extra bracket after 'td',( ? Because the other user who posted an answer did the same thing and didn't close that bracket either which appears aftert he 'td' right before the function. – SilentDev Oct 28 '13 at 18:03
sorry that was a typo – Anto Subash Oct 28 '13 at 18:05
1

But okay this works and the other answer ($('body').on) also works only if I place it before the $(document).ready(function..... thanks. – SilentDev Oct 28 '13 at 18:06

score 2 · Answer 4 · answered Oct 08 '17 at 14:16

2

I like this.-

 $("#table tr").click(function(){
    console.log(this);
});

answered Oct 08 '17 at 14:16

Delmirio Segura

1,651
1
9
5

This doesn't work because 'tr' are created dynamically! – zppinto Mar 13 '18 at 18:32

score 1 · Answer 5 · edited Nov 07 '16 at 16:24

1

This code works just fine:

$(document).ready(function(){
    $("td").click(function(){
        if(this.title!=""){
            alert(this.title);
        }
    });
});

edited Nov 07 '16 at 16:24

SquareCat

5,699
9
41
75

answered May 08 '16 at 16:21

user2912275

11
1

score 0 · Answer 6 · answered Dec 27 '19 at 09:22

0

use this to catchs click events for spesifc tr and td;

$('#table_id').on('click', 'tr.statusP td:first-child', function () {
                    alert('clicked');
                });

answered Dec 27 '19 at 09:22

zamoldar

548
10
13

jQuery .click function not working on < td > tag?

6 Answers6

Linked