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

问题:

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?

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

回答2:

Try like this :

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

回答3:

try this

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

回答4:

I like this.-

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

回答5:

This code works just fine:

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

回答6:

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

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