Tengo una serie de Acciones agrupadas por categorías que están en un carrusel.

Al pulsar una Categoría se debe mostrar mediante ajax las acciones en el mismo carrusel.

Funcionaba perfectamente antes de incorporar el carrusel, recibía bien los datos (y los sigo recibiendo) del ajax, el problema es a la hora de “crear ” el carrusel en el Javascript.

Se puede ver como en el carrusel de categorías en el html, lo creo y funciona perfectamente, van saliendo las categorías, y cuando pulso en una categoría va a la función << sacarAccionesCategoria >> y el alert me da como resultado las acciones, pero cuando voy a “Construir” el carrusel de las acciones en el javascript, no se muestra nada en el html.

¿ Podrían ayudarme por favor ?

<main>      <!--Carrusel-->     <div id="ficha">         <div id="demo" class="carousel slide" data-ride="carousel">               <!-- The slideshow cambia el tamaño de la img-->             <div class="carousel-inner">                 <?php                 if (isset($  categoria)) {                       $  contador = 1;                     foreach ($  categoria as $  valor) {                         ?>                          <div class="carousel-item ficha <?php if ($  contador == 1) {                     echo 'active';                 } ?> ">                              <?php                             echo '<form  method="post" class="cate">';                             echo '<input type="hidden" name="_token" value="' . csrf_token() . '">';                             echo '<input type="hidden" value="' . $  valor->id_categoria . '" id="categoria" name="categoria" />';                             echo '<div class="centrado">';                             echo '<button type="submit"><img src="' . $  valor->imagen . '" class="img-responsive"></button>';                             echo '<p>' . $  valor->descripcion . '</p>';                             echo '</div>';                             echo '</form>';                             echo '</div>';                             $  contador = 0;                         }                     } else {                         //imagen de error                     }                     ?>                   </div><!--Fin slideshow-->                   <!-- Left and right controls -->                 <a class="carousel-control-prev" href="#demo" data-slide="prev">                     <span class="carousel-control-prev-icon"></span>                 </a>                 <a class="carousel-control-next" href="#demo" data-slide="next">                     <span class="carousel-control-next-icon"></span>                 </a>              </div> <!--Fin carrusel-->         </div> <!--Fin Ficha--> </main>  <!--Fin Main--> <footer> </footer>  <script>     var album = [];     var sonidosTablero = [];     var fases_favoritas = [];     var accionesSeleccionadas = [];      $  ('form').on('submit', function (evt) {         evt.preventDefault(); // Esto anula el comportamiento por defecto del formulario          var data = $  (this).serialize();         var url = "";          if ($  (this).closest("form").attr('id') == 'buscador') {              url = "../resources/views/usu/buscar_ajax.php";         } else {              url = "../resources/views/usu/categorias_ajax.php";         }          $  .post(url, data, function (respuesta) {             if (respuesta) {                 alert(respuesta);                 sacarAccionesCategoria(respuesta);             } else {                 alert('ERROR DE AJAX');             }         }).fail(function (error) {             alert("Error: " + error.status);         });      });      function sacarAccionesCategoria(msg) {          alert('Respuesta del servidor:' + msg);         var ob = JSON.parse(msg);         var longitud = Object.keys(ob).length;         alert(longitud);         //borrar todo el codigo Html que hubiera escrito          $  ('#ficha').html(" ");          for (var i = 0; i < longitud; i++) {              var id_nombre = "nombre_ficha" + i;             var id_imagen = "imagen_ficha" + i;             var id_sonido = "sonido_ficha" + i;             var id_accion = "accion" + i;              var form = $  ("<form/>",                     {method: 'post',                         class: 'accioform1 col-md-3',                         id: i                     }              ).on('click', function (evt) {                  evt.preventDefault(); // paras el envio tradicional del formulario;                  var identificador = $  (this).find(".idef").val();                 alert(identificador);                 var img = $  (this).find(".imgf").attr('src');                 alert(img);                 var son = $  (this).find(".sound").attr('src');                 alert(son);                 AlmacenarPictograma(identificador, img, son, 0);              });//fin onclick etiqueta formulario               var contenido = "<div id='demo' class='carousel slide' data-ride='carousel'> <div class='carousel-inner'>";              if (i == 0) {                 contenido += "<div class='carousel-item ficha active'> ";             } else {                 contenido += "<div class='carousel-item ficha'> ";             }              form.append('<input type="hidden" class="idef" value="' + ob[i].id_accion + '"  id="' + id_accion + '" name="idaccion"/>');             form.append('<input type="image" name="" class="img-responsive imgf" src="' + ob[i].imagen + '" id="' + id_imagen + '" value=""/>');             form.append('<audio id="' + id_sonido + '" src="' + ob[i].sonido + '" class="sound"></audio>');             form.append('<p name="nombre" id="' + id_nombre + '">"' + ob[i].nombre + '"</p>');              contenido.append(form);              contenido += "</div>";             contenido += "<a class='carousel-control-prev' href='#demo' data-slide='prev'><span class='carousel-control-prev-icon'></span> </a> <a class='carousel-control-next' href='#demo' data-slide='next'> <span class='carousel-control-next-icon'></span></a> </div>  ";                $  ("#ficha").append(contenido);           }//Fin For              }//Fin funcion  </script>