1
                    $(function () {
                    var scntDiv = $('#dynamicDiv');
                    var i=2;
                      $(document).on('click', '#addInput', function () {
                        $('<table class="grupo">'+
                            '<tr>'+
                                '<td><input  type="text"  name="componente[]" id="componente" value="" placeholder="Componente" /></td>'+
                                '<td><input type="text" name="nparte[]" id="nparte"  placeholder="N Parte"   /></td>'+
                                '<td><input  title="SOLO NUMEROS" name="cantidad[]" type="text" value="0"  id="cantidad"  placeholder="Cantidad" pattern="[0-9]+" onkeypress="ValidaSoloNumeros()" /></td>'+
                                '<td><input  title="SOLO NUMEROS"  type="text"  name="precio[]"  value="0"  id="precio"  placeholder="Precio"  onkeypress="ValidaSoloNumeros()" /> </td>'+
                                '<td><input  type="text"  value="0"  name="total[]" id="total"  placeholder="total"  readonly /></td>'+
                                '<td><a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
                                '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>'+
                                '<i class="fas fa-times"></i></a></td>'+
                            '</tr>'+
                        '</table>').appendTo("#dynamicDiv");
                        i++;    
                          return false; 
                      });
                      $(document).on('click', '#remInput', function () {
                          $(this).parents('p').remove();
                          return false;
                      });
                  });

(1)Al hacer append. se crean los elementos dinámicamente en el html , pero cuando se generan, la función de cálculo no los reconoce..

            <table class="grupo">
                <tr>
                    <td><input  type="text"  name="componente[]" id="componente" value="" placeholder="Componente" /></td>
                    <td><input type="text" name="nparte[]" id="nparte"  placeholder="N Parte"   /></td>
                    <td><input  title="SOLO NUMEROS" name="cantidad[]" type="text" value="0"  id="cantidad"  placeholder="Cantidad" pattern="[0-9]+" onkeypress="ValidaSoloNumeros()" /></td>
                    <td><input  title="SOLO NUMEROS"  type="text"  name="precio[]"  value="0"  id="precio"  placeholder="Precio"  onkeypress="ValidaSoloNumeros()" /> </td>
                    <td><input  type="text"  value="0"  name="total[]" id="total"  placeholder="total"  readonly /></td>
                    <td><a class="btn btn-danger" href="javascript:void(0)" id="remInput">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    <i class="fas fa-times"></i></a></td>
                </tr>
            </table>

(2)Estos elementos html si son reconocidos por la función de cálcular js

     $(document).ready(function()
      {
      $(".grupo").keyup(function()
    {
    var cantidad=$(this).find("input[name^=cantidad").val();    
    var precio=$(this).find("input[name^=precio").val();
    var tot=0;
    tot = parseFloat(precio)*parseFloat(cantidad);
    $(this).find("input[name^=total").val(tot.toFixed(2));
    $(this).find(" 
    [class=total]").html(parseFloat(precio)*parseFloat(cantidad)); 
    var total=0;
    var igv = 0;
    var completo=0;

          $(".grupo .total").each(function()
        {
          total=total+parseFloat($(this).html());
          igv = total * 0.18;
          completo = igv + total;


        })
        $(".total .total ").html(total).val();
        $("input[name=subtotal").val(total.toFixed(2));
        $("input[name=igv").val(igv.toFixed(2));
        $("input[name=completo").val(completo.toFixed(2));


      });
  });

(3)calcular js

2
  • Traduce tu pregunta, estas en es.stackoverflow.com
    – alanfcm
    el 6 feb. 2019 a las 0:38
  • Si, gracias, ya lo cambie, ojala me puedan ayudar por favor. el 6 feb. 2019 a las 14:08

2 respuestas 2

0

El problema es que los elementos dinamicos no estan presentes cuando cargas la pagina. Para que funcione correctamente debes usar on() asi:

$(document).ready(function()
  {
  $(document).on("keyup", ".grupo", function()
{
var cantidad=$(this).find("input[name^=cantidad").val();    
var precio=$(this).find("input[name^=precio").val();
var tot=0;
tot = parseFloat(precio)*parseFloat(cantidad);
$(this).find("input[name^=total").val(tot.toFixed(2));
$(this).find(" 
[class=total]").html(parseFloat(precio)*parseFloat(cantidad)); 
var total=0;
var igv = 0;
var completo=0;

      $(".grupo .total").each(function()
    {
      total=total+parseFloat($(this).html());
      igv = total * 0.18;
      completo = igv + total;


    })
    $(".total .total ").html(total).val();
    $("input[name=subtotal").val(total.toFixed(2));
    $("input[name=igv").val(igv.toFixed(2));
    $("input[name=completo").val(completo.toFixed(2));


  });
});
1
  • 1
    Ya lo solucione, como tal y como los describiste. solo me hacia falta el .on " $(document).on("keyup", ".grupo", function()". Muchas Gracias. el 7 feb. 2019 a las 21:50
0

tu error es que le estas enviado un evento onclick="javascript:void(0)" que no es mas que decirle no hagas nada!
tambien estas ejecutando una funcion onkeypress="ValidaSoloNumeros() pero tambien tienes un listener jquery para el keyup
debes decidirte por una o por otra! y utilizar event delegation que seria $(document).on("keyup",".grupo",function() para que pueda leer los elementos dinamicos!

Nota: utiliza los templates de javascript para eso estan ya no es necesario concatenar y concatenar

$(function () {
    $(document).on('click', '#addInput', function () {
    let template = `<table class="grupo">
    <tr>
        <td><input  type="text"  name="componente[]" id="componente" value="" placeholder="Componente" /></td>
        <td><input type="text" name="nparte[]" id="nparte"  placeholder="N Parte"/></td>
        <td><input  title="SOLO NUMEROS" name="cantidad[]" type="text" value="0"  id="cantidad"  placeholder="Cantidad" pattern="[0-9]+" onkeypress="ValidaSoloNumeros()"/></td>
        <td><input  title="SOLO NUMEROS"  type="text"  name="precio[]"  value="0"  id="precio"  placeholder="Precio"  onkeypress="ValidaSoloNumeros()" /> </td>
        <td><input  type="text"  value="0"  name="total[]" id="total"  placeholder="total"  readonly /></td>
        <td><a class="btn btn-danger"  id="remInput">
        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
        <i class="fas fa-times"></i></a></td>
    </tr></table>`;

    $("#dynamicDiv").append(template);  
        return false; 
    });

    $(document).on('click', '#remInput', function (e) {
        event.preventDefault();
        $(this).parents('p').remove();
        return false;
    });
});
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.