php - jQuery Selection does not work -

in html document have got table empty table body, gets automatically filled jquery when document loaded. table body generated php script, jquery gets content simple request.

here php code...

<?php  // ... // ... // take @ following 2 lines, // other code not important in case. while ($tabledatarow = $tabledata->fetch_assoc())     echo '<tr><td>'. $tabledatarow['id']. '</td><td>'. $tabledatarow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tabledatarow['id']. '">delete</a></td></tr>';  ?> 

the output be...

<tr><td>1</td><td>nadine</td><td><a href="#" class="delete-row" data-id="1">delete</a></td></tr><tr><td>2</td><td>nicole</td><td><a href="#" class="delete-row" data-id="2">delete</a></td></tr> 

everything works perfect, problem jquery not react if click event occurs. jquery code looks this...

$(document).ready(function() {     $(".delete-row").click(function(event) { // "a[class=delete-row]" not work, too. "*" works every element, links?!         event.preventdefault();         alert("you clicked on link!")     }); }); 

.click() makes use of jquery's bind() method, takes snapshot of dom. in case, snapshot generated on document ready.

as php code dynamically added page, not included in document ready dom snapshot. reason, jquery has on() method can used instead:

$("table").on('click', '.delete-row', function() { ... }); 

this known event delegation.