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>
