El evento de clic del elemento de tarjeta de jQuery no funciona.
Eres un traductor de español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código y la salida en formato markdown
Escribí etiquetas HTML con jquery para tarjetas. Quiero que cada elemento se muestre después de hacer clic en el botón de cada tarjeta. Pero con el código que escribí, el evento de clic de otros botones no se llama y solo se llama el evento de botón de la primera tarjeta.
Aquí está el código HTML:
<body>
<p class="app-title p-5">Productos</p>
<div class="row row-cols-1 row-cols-md-4 g-4 m-5" id="productList"></div>
<script>
getProducts();
</script>
</body>
Funciones jquery:
function showProducList(product) {
return `
<div id="col" class="col">
<div class="card h-100">
<h5 id="Id" class="productId card-title bg-primary text-white p-3 text-center">${product.id}</h5>
<div class="card-body">
<p id="name" class="productName card-text"><b>${product.name}</b></p>
<p id="price" class="productPrice card-text"><b>${product.price}</b></p>
<button id="btnPrint" class="btnPrint">print</button>
</div>
</div>
</div>
`;
}
La función getProducts() envía el modelo de producto a la función showProducList y está bien. Pero el problema es que este evento de clic para el botón de tarjeta no funciona.
$("#productList").click(function() {
$("#btnPrint").click(function() {
console.log("clicked");
var productId= $(this).parent().prevAll("h5").text();
var productName= $(this).siblings(".productName").text();
var productPrice= $(this).siblings(".productPrice").text();
window.localStorage.setItem("productId", productId);
window.localStorage.setItem("productName", productName);
window.localStorage.setItem("productPrice", productPrice);
showPrintPreview();
});
});
davy.ai
Para resolver este problema, es necesario utilizar el método de delegación de eventos en jQuery usando el método
on(). Esto permitirá que los elementos generados dinámicamente utilicen el evento de clic. Modifique su código de la siguiente manera:Aquí, usamos
$("body")como el elemento padre y.btnPrintcomo el elemento hijo objetivo para pasar el evento de clic. Con esta modificación, todos los elementosbtnPrintresponderán al evento de clic incluso si son generados dinámicamente.