Jquery get from mysql works only first time - php

Question

I have the following jquery script
$("li").click(function(){
var id = $(this).attr("id");
$.get("getData.php", {id: id}, function(data){
$("ul").after(data);
});
$(this).css("color","red");
});
and the getData.php file
<?php
include("db_config.php");
$ctgID = $_GET["id"];
if(isset($ctgID))
{
getData($dbh, $ctgID);
}
function getData($dbh, $ctgID)
{
try{
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = $dbh->prepare("select ctgid, ctgdescription from categories where ctgparentid = $ctgID");
$sql->execute();
$result = $sql->rowCount();
if($result >0)
{
echo "<ul>";
while($row = $sql->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
{
echo "<li class=\"subCtg\" id=\"". $row[0] . "\">" . $row[1] . "</li>";
}
echo "</ul>";
}
else
{
echo "1";
}
}
catch(PDOException $e){
die($e);
}
}
?>
Even if the above is working perfectly for the top level categories its not working when i am clicking on the subCtg class that is created. Can you help me please?

Answer 1

Use click event like this, that trigger on your existing and dynamic lists as well:
$('ul').on('click', 'ul li', function(){
.....
});
Take a look on this example
HTML:
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
JS:
$(document).on('click', 'li', function(e){
e.preventDefault();
e.stopPropagation();
$(this).parent('ul').after('<ul><li>new item click here </li></ul>');
});
Live demo: http://jsfiddle.net/jogesh_pi/YdByT/

Answer 2

Use Jquery Bind instead of click event ..
$( ".subCtg" ).bind( "click", function() {
alert( "User clicked " );
});
Jquery Bind

Answer 3

As you load new ul/li elements, you have to bind the "click"
event on them.
Try this:
PHP
...
while($row = $sql->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
{
echo "<li class=\"subCtg\" onclick=\"myFunc(".$row[0].");\" id=\"". $row[0] . "\">" . $row[1] . "</li>";
}
...
Javascript
$("li").click(function(){
var id = $(this).attr("id");
myfunc(id);
});
function myFunc(id){
$.get("getData.php", {id: id}, function(data){
$("#"+id).parent(ul).after(data);
});
$("#"+id).css("color","red");
}
An only-javascript approach could be:
function myFunc(id){
$.get("getData.php", {id: id}, function(data){
$("#"+id).parent(ul).after(data);
});
$("#"+id).css("color","red");
//create onclick event on new elements
$("li").each(function(){
$(this).click(myFunc($(this).attr("id")));
});
}