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?

Harlequin

Answer 1

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());
   });

Entrance

hm what do you mean by #newTabletbody? I tried $("#newTable").on and that didn't work. – Harlequin

Sorry that was a typo. You can try $('body').on('click if that doesn't seem to work. – Entrance

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. – Harlequin

okay it works only if I place it before the $(document).ready(function – Harlequin

Answer 2

Try like this :

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

Interjacent

if you delete the extra '(' after the 'td' then it works only if I place it before the $(document).ready( function. – Harlequin

Answer 3

try this

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

Posture

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. – Harlequin

sorry that was a typo – Posture

But okay this works and the other answer ($('body').on) also works only if I place it before the $(document).ready(function..... thanks. – Harlequin

Answer 4

I like this.-

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

Thereafter

This doesn't work because 'tr' are created dynamically! – Fudge

Answer 5

This code works just fine:

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

Jacobinism

Answer 6

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

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

Alp