JQuery - Problema al añadir div dinamicamente con jquery

   
Vista:

Problema al añadir div dinamicamente con jquery

Publicado por nemesis (2 intervenciones) el 15/07/2017 11:47:04
hola a todos y gracias de antemano por vuestra ayuda

soy un estudiante de informatica y estoy aprendiendo a desarrollar webs

bien, mi problema es en siguiente:
quiero añadir un div dinamicamente con jquery y me lo agrega pero se me recarga la pagina y me desaparece.
tengo el siguiente codigo:

mi fichero .js

1
2
3
4
5
6
7
8
9
10
11
//cargamos al inicio
$(document).ready(inicio);
//almacenamos el codigo de los productos del carrito en un array
    productos = new Array();
 
/*funcion de carga al inicio*/
function inicio(){
 
    $('.boton_comprar').bind('click',añadir_carro);
 
}

y la funcion que creo es la siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function añadir_carro(){
    //recuperamos el div buscar 
   var buscar = $('#buscar');
   //recuperamos los datos del producto 
   var producto = $(this).attr('data-pro');
   var cod = $(this).attr('data-ocu');
   var precio =$(this).attr('data-pre');
   //convertimos a valores numericos el codigo y el precio
   cod = parseInt(cod);
   precio = parseInt(precio);
   //variable booleana que controla si el codigo ya existe en el carrito
   var existe = false;
 
 
   //comprobamos si no hay productos en la cesta para crear un formulario que almacene los productos en casa de que no haya nada
   if(productos.length  == 0){
       //creamos el formulario
       var carr = $('<div id="mostrador" ></div>')
       var carrito = $("</br>\n\
                        <form class='carrito'  action=' $_SERVER[PHP_SELF]' method='POST'>\n\
                        <label>Codigo</label><input id='cod' type='text' value=''/>\n\
                        <label>Producto</label><input id='prod' type='text' value=''/>\n\
                        <label>Precio</label><input id='pre' type='text' value=''/>\n\
                        <input class='bot' id='pagar' type='submit' name='pagar' value='Pagar' />\n\
                        <input class='bot' id='eliminar' type='submit' name='eliminar' value='Eliminar' />\n\
                        </form>\n\
                        </br>");
        //añadimos el formulario al div correspondiente
        carr.append(carrito);
        buscar.append(carrito);
        productos.push(cod);
        //añadimos los valores al formulario
        $('#cod').val(cod);
        $('#pre').val(precio);
        $('#prod').val(producto);
 
   }
 
}

analizando el codigo con mi navegador me crea el div y me inserta el formulario en el añadiendolo al div con ID = buscar pero se me recarga la pagina y me desaparece.

un saludo y gracias a todos de nuevo por la ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Problema al añadir div dinamicamente con jquery

Publicado por Horroroso (53 intervenciones) el 20/07/2017 19:08:42
Hola, Intenta con esto:
1
$('.boton_comprar').bind('click',añadir_carro(e));
Luego en la funcion coloca lo siguiente:
1
2
3
4
5
function añadir_carro(e){
    e.preventDefault();
......
......
}

Espero que te funcione. Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar