Hola! Estoy haciendo un ejercicio probando cosas con jQuery y me he atascado..
El ejercicio que estoy haciendo es algo así como:
Hay una imagen (producto) y al hacer clic añade una fila a una tabla con información, ejemplo simple del típico carro de compras. Pero hay un botón que convierte las imágenes en texto (oculta la imagen y crea un div con el texto del producto) y la inversa.
Casi todo funciona correctamente.
*Al hacer clic en el botón oculta las imagenes y crea un div o muestra las imagenes y borra el div.
*Al hacer clic en la imagen se inserta la fila en la tabla y se actualiza la info. (id: platano01)
*Al hacer clic en el texto de un div inserta la fila o actualiza del mismo (id: platano02)
*Pero al hacer clic en el texto del div creado con el botón jQuery no inserta (id: platano03)
El problema que tengo en breves palabras es:
Con jQuery he creado un div (<div id='platano03'> platano03 - div añadido con jQuery</div>) y quiero que al hacer clic en el se inserte una fila, del mismo modo que lo hace la imagen y otro div (creado en el html).
¿Alguna idea porque no puedo trabajar con el nuevo div que crea jQuery?
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Botiga - Pràctica jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="Jquery1-5.js"></script>
<script type="text/javascript" >
$(function(){
// Cada vez que se hace clic alterna 2 funciones
$('#boto').toggle(
function(){
$("img[id]").hide(); // oculta la imagen
/* Genera un nuevo div con id platano03 debajo de la imagen.
* Hay una función que afecta a este nuevo div03 al hacer clic encima
* ¡¡¡ PERO NO FUNCIONA !!! No puedo tratar este div fuera de la función toggle
*/
$("<div id='platano03'> platano03 - div añadido con jQuery</div>").insertAfter("img[id='platano01']");
},
function(){
$("img[id]").show(); // muestra la imagen
$("div[id!=platano02]").remove(); //elimina divs menos platano02
}
);
// CUANDO SE HACE CLIC SOBRE CUALQUIER COSA CON ESTOS ID AÑADE AL CARRO
$("[id='platano01'],[id='platano02'],[id='platano03']").bind('click',function(){
if($("td[id='platanoCANT']").length <= 0){
$("<tr><td><img width='60px' height='60px' alt='platano' src='imatges/platano.png' id='platano'/></td>\n\
<td>Platano </td><td id='platanoPRECIO'> 2.50 €</td><td id='platanoCANT'> 1 </td><td id='platanoTOTAL'> 2.50€ </td></tr>").appendTo("#cistellaDIV");
}else{
var platanoCANT = parseInt($("td[id='platanoCANT']").html())+1; //Obtener cantidad producto
var platanoTOTAL = parseFloat($("td[id='platanoPRECIO']").html()) * platanoCANT ;
$("td[id='platanoCANT']").html(platanoCANT);
$("td[id='platanoTOTAL']").html(platanoTOTAL + "€");
}
});
});
</script>
</head>
<body>
<!-- FUNCIONA CAMBIA DE IMAGEN A TEXTO -->
<input id="boto" type="submit" value="texto / imagenes" /><br />
<!-- FUNCIONA AL HACER CLIC INSERTA LA FILA EN LA TABLA -->
<img alt="platano01" id="platano01" title="platano01" src="imatges/platano.png"/>
<!-- FUNCIONA AL HACER CLIC INSERTA LA FILA EN LA TABLA -->
<div id="platano02"><b>platano02 - div añadido en el html</b></div>
<hr align="left" width="70%"><br/>
<div id="cistellaDIV2" > cistellaDIV</div>
<table border="1">
<thead>
<tr>
<th>Imagen</th>
<th>Nombre</th>
<th>Precio</th>
<th>Unidades</th>
<th>Total</th>
</tr>
</thead>
<tbody id="cistellaDIV">
</tbody>
</table>
</body>
</html>