Estoy creando una aplicación web para buscar libros y guardarlos en una base de datos. Para ello, al hacer la búsqueda el html que muestra los resultados se genera a través de document.getElementById("#").innerHTML . Para una visualizarlo mejor, este sería el resultado al realizar la búsqueda: https://imgur.com/a/vQylwEy
La llamada a la función está dentro de este HTML generado desde Javascript pasándole un parámetro en concreto, y la cosa es que haciendo click en el botón del primer resultado, el libro se guarda correctamente en la base de datos a través de php. Sin embargo, al hacer click en cualquiera de los botones siguientes, no hace nada y he comprobado a través de Sources en la Consola que haciendo click en ellos a la función no le entra ningún parámetro. Me gustaría saber qué está provocando este comportamiento.
Mi Javascript (la función en concreto está al final del todo):
var htmlcontent = "";
var thumb = "";
var author = "";
var isbnL = "";
var title = "";
var arr = new Array();
var resultados = new Array();
$("#search_form").submit(function (e) {
$("#books").html("");
e.preventDefault();
function Libro(isbn, titulo, autor, imagen) {
this.isbn = isbn;
this.titulo = titulo;
this.autor = autor;
this.imagen = imagen;
//GETTER
this.getIsbn = function () {
return this.isbn;
}
this.getTitulo = function () {
return this.titulo;
}
this.getAutor = function () {
return this.autor;
}
this.getImagen = function () {
return this.imagen;
}
}
var searchQuery = $("#search_txt").val();
searchQuery = searchQuery.split(" ").join("+");
var buscar = $("#search_txt").val();
if (buscar == "") {
alert("Por favor, introduce algún término de búsqueda");
}
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=" + searchQuery,
success: function (json) {
arr = json.items;
arr.forEach(function (dato) {
if (typeof dato.volumeInfo.imageLinks != "undefined") {
thumb = dato.volumeInfo.imageLinks.smallThumbnail;
} else {
thumb = "http://i.imgur.com/oM3MdAi.png";
}
// AUTHOR
if (typeof dato.volumeInfo.authors != "undefined") {
author = dato.volumeInfo.authors[0];
}
if (typeof dato.volumeInfo.title != "undefined") {
title = dato.volumeInfo.title[0];
}
if (typeof dato.volumeInfo.industryIdentifiers != "undefined") {
isbnL = dato.volumeInfo.industryIdentifiers[0].identifier;
}
var miLibro = new Libro(isbnL, dato.volumeInfo.title, author);
resultados.push(miLibro);
htmlcontent +=
"<div class='cards'><div class='card-content'><div class='media'><div class='media-left'><figure class='image is-128x128'><img src='" + thumb + "' alt='alt text' /></figure></div><div class='media-content'><p class='title is-4'>" +
dato.volumeInfo.title + "</p><p class='subtitle is-6'>" + author + "</p><button id='add' class='button is-primary add' onclick='guardarLibro(" + isbnL + ") '>Añadir a mi lista</button></div></div></div></div>";
document.getElementById("books").innerHTML =
"<div>" + htmlcontent + "</div><br>";
}),
document.getElementById("books").innerHTML =
"<div>" + htmlcontent + "</div><br>";
console.log(resultados);
}
});
});
function guardarLibro(isbn) {
$(document).on("click", ".add", function () {
console.log("boton pulsado");
console.log(isbn);
$("#add").replaceWith("<i class='fas fa-check-circle' style='color=#02c39a;'></i>Añadido");
for (var i = 0; i < resultados.length; i++) {
if (resultados[i].isbn == isbn) {
isbnL = resultados[i].getIsbn();
title = resultados[i].getTitulo();
author = resultados[i].getAutor();
thumb = resultados[i].getImagen();
}
}
console.log(title);
var url = 'guardarlibro.php';
$.ajax({
url: url,
method: "POST",
data: {
isbnL, title, author, thumb
},
success: function (response) {
console.log("JS ok");
}
});
});
}