单击并触发由Ajax生成的表上的函数

Question

My page has ajax function which generate table and attache it to a div. Following is the php page called by Ajax.

echo "<table border='1' cellspacing='12' cellpadding='4' style='border-collapse: collapse' width='700' id='tablecat'>";

while ($row = mysql_fetch_assoc($results)) {
    $category = $row['category'];

echo "<tr bgcolor='white'>
<td class='value'>$category</td>
</tr>";
}

echo  "</table>";

Then I need to call another ajax call when the table cells are clicked. Tried many ways but no success.

$("#tablecat").on("click", "td", function() {

});

Can someone tell me how to do this? Thanks.

Answer 1

Your event delegation did't work in this case because $("#tablecat") also created dynamically, you need to reference on its top level like the div that hold the table or the body or document like so:

$(document).on("click","#tablecat td", function() {
     alert('hi');
});

Answer 2

As I understand you write your event listener on document ready, but as listener setted to object which not exists on document ready (it gets by ajax) it does not work.

You can set listener on body, for example:

$("body").on("click", "#tablecat tr td", function(e) {

});

Answer 3

I know one option, you can you the jQuery code inside AJAX success function. For an example:

$.ajax({
url: "/fielname.php", 
type: "POST", //POST
success:function(response) {
    $("#tablecat").on("click", "td", function() {

    });
},
error:function(data){

}

});

Answer 4

you just need to set

$("#tablecat").on("click", "td", function() { 

});

in a function and when you generate table with ajax, on success - call this function.