Problema con Ajax y tabla dinamica

[JHONATHAN11]

Hola amigos como están, tengo un pequeño inconveniente con una tabla dinámica.

Estoy intentando hacer una tabla dinámica, es decir el usuario tiene un select con todos los productos registrados y al seleccionar quiero que ese producto se agregue a la tabla con todos sus datos.
Ese proceso lo hago con ajax y mando a buscar a mi controlador y me devuelve el producto con sus datos, a lo que agrego a la tabla le hago que algunas celdas sean editables, por ejemplo si quiero cambiar la cantidad del producto, si cambio quiero multiplicar por el precio y actualizar la celda del subtotal. Aquí es donde tengo el inconveniente, si hago una función de prueba para seleccionar una celda especifica no se ejecuta la función es como si no existieran datos, y me dado cuenta por que tengo una tabla bostrap y al agregar datos por ajax me decía que esta vacía la tabla. les dejo mi código para ve si me pueden echar una manita.

mi select donde estan mis productos el id es "compras_ventas_auxiliar"

Código:

{{form_errors(formulario.auxiliar)}}{{form_widget(formulario.auxiliar , {'attr':{'autocomplete' : 'off','class':'form-control input-sm','style':'text-align: justify;width: 500px','autofocus':'true' } }) }}

Mi tabla

Código:

<table id="table" class="table table-striped">
                                    <thead>
                                        <tr style="background-color: lightseagreen">
                                            <th>CODIGO</th>
                                            <th>NOMBRE ARTICULO</th>
                                            <th>MARCA</th>
                                            <th>xUNI</th>
                                            <th>xCAJA</th>
                                            <th>BONO</th>
                                            <th>PRECIO</th>
                                            <th>DES. %</th>
                                            <th>SUBTOTAL</th>
                                            <th>IVA</th>
                                            <th>TOTAL</th>
                                            <th>UTIL. %</th>
                                            <th>PVP1</th>
                                            <th>PVP2</th>
                                            <th>PVP3</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>

                                </table>

Mi función ajax que agrego los datos a la tabla al seleccionar el select

Código:

$(document).on('change', '#compras_ventas_auxiliar', function (e) {
            e.preventDefault(e);
            var bpr = document.getElementById('compras_ventas_auxiliar');
            var url = "{{path('sistemasifac_buscarproducto',{'id':'id'})}}";
            url = url.replace('id', bpr.value);
            $.ajax({
                method: "POST",
                url: url,
                dataType: 'json',
                success: function (data) {
                    var i = 1; //contador para asignar id al boton que borrara la fila
                    $.each(data, function (datos, datos) {
                        var fila = '<tr>\n\
                                <td>' + datos.cod + '\
                                </td><td>' + datos.nom + '\
                                </td><td>' + datos.mar + '\
                                </td><td contenteditable="true">\
                                </td><td contenteditable="true">\
                                </td><td contenteditable="true">\
                                </td><td>' + datos.cos + '\
                                </td><td contenteditable="true">' + datos.cos + '\
                                </td><td>0.00\
                                </td><td>iva\
                                </td><td>0.00\
                                </td><td contenteditable="true">\
                                </td><td contenteditable="true">\
                                </td><td contenteditable="true">\
                                </td><td contenteditable="true">\
                                </td></tr>'; //esto seria lo que contendria la fila
                        $('#table tr:last').after(fila);
                    });
                },
                error: function () {
                    $('#documento').empty();
                }
            });
        });

Ahora implemento esta función para obtener un valor al seleccionar la fila pero no hace nada

Código:

$(document).on('click', '#table tbody tr', function (e) {
            var total = $(this).find("td:eq(1)").text();
            alert(total);
        })

No se como acceder a la nueva tabla por que según puedo observar es como si estará vacía la tabla. no se como puedo hacerlo

Gracias por la ayuda de ante mano.