I append data with jquery , but not working any event on this data

I use bellow event and append div.categoryAjaxId .

//--------- get product -------------------------
jQuery('.orderProduct').click(function(e){
    var productId = $(this).attr('id');
    var token = '';

    e.preventDefault();

    jQuery.ajax({
        url: "",
        method: 'post',
        data: {
            id: productId,
            _token: token
        },
        success: function(data){
            $('#orderProductSelect').hide();
            $('.categoryAjax').show();
            $.each(data, function(index,category){
                $('.categoryAjax').append('<div class="col-md-4 categoryAjaxId" id="'+category.id+'" style="margin: 10px;cursor: pointer;">' +
                    '<img style="width: 100%;" src="/images/'+category.filename+'">' +
                    '<span>'+category.name+'</span>' +
                    '</div>');
            });
        }});
});

now I want get categoryAjaxId ID . with bellow event :

//----- get feature and value of category --------------------
jQuery('.categoryAjaxId').click(function(e){
    var categoryId = $(this).attr('id');
        //console.log(categoryId);
    var token = '';

    e.preventDefault();

    jQuery.ajax({
        url: "",
        method: 'post',
        data: {
            id: categoryId,
            _token: token
        },
        success: function(data) {
            $('.categoryAjaxId').hide();
            $('.featureAjax').show();
            $('.featureAjax').append('xxxxxxxxxxx');
        }
    });
});

but this event not working . and not show anything in console.log .

Thanks your help

via Chebli Mohamed