Javascript + Ajax en inputs dinámicos

[Middrel]

Hola, buenas tardes

Tengo la siguiente duda con el siguiente código... les comento:

Este código agrega inputs dinámicamente mediante javascript. Funciona bien, sin embargo cuando implemento otras funciones en javascript, estas no pueden ejecutarse porque fallan. Cuando miro la consola de error, me marca que es en la función de los inputs. Creo que el error se deriva de mezclarlo con PHP. El código es el siguiente:

Código Javascript:

$(AddButton).click(function (e) {
            FieldCount++;
            
            $(contenedor).append('<div><?php include("bd/query-catalogo-footer.php"); ?><select name="producto[' + FieldCount + ']" id="p_'+ FieldCount +'" class="input-type-det-b" ><option value="0">Producto/ Servicio</option> <?php while($rowSelectProductos = mysqli_fetch_array($sqlSelectProductos, MYSQLI_ASSOC)) { ?><option value="<?php echo $rowSelectProductos['id_catalogo']; ?>"><?php echo $rowSelectProductos['cat_titulo']; ?></option> <?php } mysqli_free_result($sqlSelectProductos); ?></select> <input type="text" name="cantidad[' + FieldCount +']" id="c_' + FieldCount + '" class="input-type-det-c" value="" placeholder="Cant"> <input type="text" name="descuento[' + FieldCount + ']" id="d_' + FieldCount +  ' " class="input-type-det-c" value="" placeholder="Desc"> <select name="exento[' + FieldCount + ']" id="e_[' + FieldCount + ']" class="input-type-det-d"><option value="Normal">Normal</option><option value="Exento">Exento</option></select> <a href="#" class="eliminar" title="ELIMINAR">[-]</a></div>');
    
            x++; 
        });
 

Si lo notan, hay algunas instrucciones de PHP. Estas instrucciones traen un catálogo de productos de una base de datos, los cuales los muestra mediante una lista en un scroll. Entonces, quiero omitir esto y traer la información de otra forma, con puro javascript. Supongo que con Ajax puedo hacerlo, pero no es mi fuerte aún y tengo dudas si es así.

[ocp001a]

Esta ya has de saber, pero por si acaso...

No puedes mezclar así javascript y php, estás metiendo dentro de un contenedor html instrucciones php, es decir, del lado del navegador estás metiendo código que debería ser procesado del lado del servidor.

¿Solución? por ajax llama a estas funciones para que vayan devolviendo los resultados que vas a meter en los contenedores.

[Middrel]

Funcionó muy bien en un principio. Pero como dices, veo que combinarlos de esa forma provoca algún tipo de inestabilidad en el código, quizá en un inicio no, pero veo que al ir incorporando funciones algo empieza a fallar.

Entonces por lo que comentas, javascript puro + ajax y así llamar las funciones, métodos, etc... ?

Ok, haré los cambios.

Saludos!!