web-dev-qa-db-ja.com

jQuery .click関数が<td>タグで機能していませんか？

だから私はJavascriptとjQueryを使用してテーブルを作成していますが、テーブルの最初の行のtdをクリックすると、その列の残りのtdがドロップダウンするようにします。私のコードを見せて説明しよう。ここに私の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
    }
}

これは基本的にtdを作成し、各tdはこの形式に似ています

<td class="rowh columni">

.row0のtdを除くすべてのtdが非表示になり、.row0 .columniのtdをクリックすると、.columniのすべてのtdが表示されるようにします。パラメーター 'heights'はjsut配列です。たとえば、

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

そして、これらの単語を使用してテーブルを作成し、headerOneとheaderTwoが最初の行にあり、someTdとanotherTdが2番目の行にあります。

今、私はそのようなクリック機能を追加しようとすると

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

そして、そのように私のdocument.ready関数でそれを呼び出します

$(document).ready( function() {

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

tdをクリックしても何もしません。どうして？

javascriptjqueryhtmlhtml-tablejquery-click-event
25
user2719875

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

DOMの作成後に要素を作成しているため。 「on」セレクターを使用して、動的に作成される正確な要素を取得します。

URLから：

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

このようにしてみてください：

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

これを試して

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

私はこれが好き。-

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

このコードはうまく機能します：

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