Consulta modificar valores de campos generados con JQUERY

[lisi1986]

Hola a todos, tengo un problemita con un script de jquery. En mi aplicacion tengo una tabla estatica que se genera al cargar la pagina y luego con un boton tengo la opcion de agregar filas a la tabla, esto lo hago con jquery.

El problema que tengo es que los campos que se generan con jquery, los cuales tienen nombre incrementales (name=nombre+i donde i va aumentando a medida que agrego mas filas) no puedo sumarlo, uno es cantidad y otro precio unitario, lo que quiero hacer es multiplicarlos pero el script que toma los valores no los reconoce, en cambio con las filas que se cargan al cargar la pagina no tengo problemas.

Imagino que el problema debe venir por el lado de que estos campos "dinamicos" no se cargan con la pagina sino que se generan despues al hacer click en el boton.. Como puedo hacer para poder multiplicar los valores de estas filas?

Les dejo el codigo que estoy usando:

Código:

    <script>
    $(function()
    {
        $("#txtprecio1").blur(function()
            {
            var cantidad = $("#txtcantidad1").val();
            var preciounitario = $("#txtprecio1").val();
            $("#txttotal1").val(cantidad * preciounitario);       
            });
    });
    </script>

Para generar la fila con el boton uso este script:

Código:

    <script type="text/javascript">
	
	        $(function()
		{ var i = 1;
	    $("#agregarconcepto").click(function()
			{
				i = i + 1 ;
				
                $('#filaarticulo').append("<tr><td><input type='text' name='txtcantidad"+i+"' id='txtcantidad"+i+"'></td><td><input type='text' name='txtconcepto"+i+"' id='txtconcepto"+i+"'></td><td><input type='text' name='txtmoneda"+i+"' id='txtmoneda"+i+"'></td><td><input type='text' name='txtprecio"+i+"' id='txtprecio"+i+"'></td><td><input type='text' name='txttotal"+i+"' id='txttotal"+i+"'></td></tr>");			});
		});
    </script>

Les agradezco cualquier pista que me puedan dar!! gracias!!

[bathorz]

Puedes probar:

Código Javascript:

$(document).ready(function() {
 
        $(function() {
          $("#txtprecio1").blur(function() {
            var cantidad = $("#txtcantidad1").val();
            var preciounitario = $("#txtprecio1").val();
            $("#txttotal1").val(cantidad * preciounitario);
          });
        });
 
        $(function() {
          var i = 1;
          $("#agregarconcepto").click(function() {
            i = i + 1;
            $('#filaarticulo').append("<tr><td><input type='text'class='sumar' name='txtcantidad" + i + "' id='txtcantidad" + i + "'></td><td><input type='text' name='txtconcepto" + i + "' id='txtconcepto" + i + "'></td><td><input type='text' name='txtmoneda" + i + "' id='txtmoneda" + i + "'></td><td><input type='text' name='txtprecio" + i + "' id='txtprecio" + i + "'></td><td><input type='text' name='txttotal" + i + "' id='txttotal" + i + "'></td></tr>");
          });
        });
 
        var suma=0;
        $('#form1').on("change", function(e) {
          $(".sumar").each(function() {
            suma += parseFloat($(this).val());
          });
          $("#test").text(suma);
        });
      });
 

Código HTML:

<form id="form1">
      <table id="filaarticulo">
      </table>
    </form>
    <button id = "agregarconcepto">Agregar</button>
    <div id="test">suma</div>
  </body>
 

[lisi1986]

@bathorz ya pude hacerlo, tuve que cambiar y poner

Código:

 $("#txtprecio1").live('blur', function(){

Agregando el live ya me toma los campos agregados con jquery. La duda que tengo ahora es como hacer el bucle FOR para que me haga la multiplicacion por la cantidad de filas que tenga (segun la cantidad que haya agregado dinamicamente). Tengo la variable i donde guardo la cantidad de filas que se han generado, pero con el siguiente codigo no me funciona...

Código:

    $(function()
    {
        for ( var u = 1; u < i; u++ ){
        $('#txtprecio' + u).live('blur', function()
            {
            var cantidad = $('#txtcantidad'+u).val();
            var preciounitario = $('#txtprecio'+ u).val();
            $('#txttotal'+ u).val(cantidad * preciounitario);       
            });
        }
    });

Que es lo que te parece que estoy haciendo mal? Gracias!

[bathorz]

Espero que te sirva esta prueba de cálculo:

Código Javascript:

$(document).ready(function() {
        $(function() {
          var i = 0;
          $("#agregarconcepto").click(function() {
            $('#filaarticulo').append("<tr class='fila'>\n\
              <td>Cant:<input type='text' class='cant' id='cant'" + i + " name='cant" + i + "' value='' /></td>\n\
              <td>Precio<input type='text' id='precio" + i + "' class='precio' name='precio" + i + "'></td>\n\
              <td>Parcial<input type='text' class='suma parcial' id='parcial" + i + "' name='parcial" + i + "' value='' /></td>\n\
            </tr>");
            i++;
          });
        });
 
        $(document).on("change", ".precio", function(e) {
          //e.preventDefault();
          var total = 0;
          for (var i = 0; i < $(".precio").length; i++) {
            var cant = $("input:text[name=cant" + i + "]").val();
            var precio = $("input:text[name=precio" + i + "]").val();
            $("#parcial" + i).val(cant * precio);
          }
          for (var i = 0; i < $(".parcial").length; i++) {
            var n = $("input:text[name=parcial" + i + "]").val();
            total += parseFloat(n);
          }
          $("#total").html(total);
        });
      });
 

Código HTML:

<form id="form1">
      <table id="filaarticulo">
      </table>
    </form>
    <button id = "agregarconcepto">Agregar</button>
    <div id="total" class="test">total</div>
 

[lisi1986]

@bathorz Muchas gracias, con el codigo que me sugeriste pude hacer andar la multiplicacion en los campos generados dinamicamente, el problema lo tengo ahora con los campos que ya estan cargados en la pagina que tambien son dinamicos, los genera PHP con un while de una base de datos. Entonces tengo las primeras filas de la tabla son variables segun los registros de una base de datos y despues el usuario genera con jquery campos extra.

Los ultimos ya pudimos hacerlos andar, con tu script, ahora tengo problemas con los primeros... Y una vez que podamos multiplicar todos, tengo que enviarlos por POST a otra pagina para guardarlos en la base de datos. Si pudieras darme una mano con esto voy a estar muy agradecido!!!! Desde ya muchas gracias!!