Javaサーブレットの応答から生成されたテーブルでjQueryが機能しない

Question

サーブレットの応答から生成されたテーブルに問題があります。 問題は次のとおりです。ボタン付きのHTMLページがあり、ボタンを押すとAjaxコールがJavaサーブレットに向かって開始されます。サーブレットは、ボタンの下の「div」内に表示される単純なHTMLテーブルで応答します。 私は要素 'TD'をクリックするたびにJavascriptのコンソールログにメッセージを表示する簡単なjQuery関数を作成しましたが、 'TD'をクリックすると何も起こりません！

奇妙なことは、同じHTMLテーブル（JavaScriptでは生成されていませんがHTMLページに含まれています）があり、その場合はjQuery関数が正常に動作するということです。

ここテーブルのコード：ここ

<table style="width:100%"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Age</th> 
    </tr> 
    <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
</table> 

のjQueryコード：

<script> 
jQuery(document).ready(function() { 
    $("td").click(function() { 
    console.log("testlog"); 
    }); 
}); 
</script> 

おかげ

Answer 1

Yを使用ドキュメント準備完了イベントではなく、ajax呼び出しをレンダリングした後にスクリプトを記述する必要があります。 さて、私はあなたのコードがそれ

$.ajax({ 
 
//options 
 
}).done(function(res){ 
 

 
    $('body').append(res) 
 
    $("td").on('click',function() { 
 
    console.log("testlog"); 
 
    }); 
 
})

Answer 2

は常にこの場合.onウェル

jQuery(document).ready(function() { 
    $("td").on('click',function() { 
    console.log("testlog"); 
    }); 
}); 

Answer 3

問題がdynamicalyが、それはあなたがクリックして聞くことができない、後でDOMよりもロードされているためtableは、イベントリスナーを持っていない発生したということであるような何かをどのように見えるかを知りませんtdに直接書かれていますが、ここでは文書全体または表のラッパーのどちらかに作業例があります。

私はajaxをシミュレートするために.5sでテーブルをロードしています。

setTimeout(function() { 
 
    $('#wrapper').append(`<table style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>`) 
 
}, 500) 
 

 
//works 
 
$('#wrapper').on('click', 'td', function() { 
 
    console.log('this works') 
 
}) 
 

 
//this does not 
 
$('td').on('click', function() { 
 
    console.log('this does not work') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"></div>