Question

My script returns the data (ul list) but JQuery doesnt work with new inserted data.

JQuery

$(".tablecategoryname").on('click', function(){
    var $a = $(this).closest('li').attr('id');
    var $c = $(this).closest('li');

    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {subcategory:$a},
       cache: false,
       success: function(data)
       {
            $(data).hide().insertAfter($c).slideDown(400);
       }    
     });    
});

Why cant JQuery work with the new items with tablecategoryname class ??

Answer 1

You’ll need delegated event handlers with dynamic elements:

$(document).on('click', '.tablecategoryname', function(){
    var $c = $(this).closest('li'),
        $a = $c.attr('id');

    $.ajax({
       type: "POST",
       url: "functions.php",
       data: {subcategory : $a},
       cache: false,
       success: function(data) {
            $(data).hide().insertAfter($c).slideDown(400);
       }    
    });    
});

replace document with closest non-dynamic parent!