Tenía una estructura HTML, que he tenido que borrar porque necesito que jQuery la dibuje de forma dinámica, tal que así:
<form class="d-inline" method="post" action="index.php?fichero=recopilatorios.php">
(<button class="modal-ano boton-enlace" role="link" name="recopilatorio"></button>)
</form>
En realidad esto iba dentro del body
de un modal Bootstrap junto a otros elementos HTML.
Con los datos provenientes vía .ajax()
de un JSON (respuesta
) le daba valor y nombre al botón dentro de un bucle for
(porque en realidad puedo necesitar pintar varios botones y no uno solo):
$('.modal-ano').text(respuesta[i].ano);
$('.modal-ano').val(respuesta[i].ano);
Es decir, el botón aparecía con este aspecto, en caso de que fuera el año 1996:
Y al hacer clic en él, te llevaba a recopilatorios.php
con información específica para el año 1996, proveniente de mi base de datos.
Bien, he sustituido el formulario por la siguiente variable:
var formulario = $(document.createElement('form'))
.addClass('d-inline')
.attr('method', 'post').attr('action', 'index.php?fichero=recopilatorios.php')
.html(boton)
.appendTo('.cuerpo-subestilo');
El formulario se agrega igualmente al body
del modal, de class = "cuerpo-subestilo"
.
A su vez también he definido una variable botón, que pretendo insertar dentro del formulario:
var boton = $(document.createElement('span'))
.addClass('boton-enlace')
.attr('role', 'link').attr('name', 'recopilatorio')
.text(` (${respuesta[i].ano})`)
.val(respuesta[i].ano);
De ahí que la variable formulario tenga .html(boton)
, pero esto no funciona: al activar el modal aparece el botón con el aspecto esperable, pero no te lleva a ningún lado.
¿Cómo podría replicar exactamente la estructura que tenía dibujada estáticamente en HTML con variables y jQuery?
EDICIÓN: Me acabo de dar cuenta de que el botón lo he creado como un elemento span
en vez de como un button
; así, imposible que funcione...