0

I got this jquery code where i clone some textfields everytime i click "btn_add", and i need the onchange function i wrote at the end to id_usd_value there works for every new clones i add but it's not working :

<script type="text/javascript" src="jquery-2.1.4.js" charset="UTF-8" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var obj = $('input[name="percent"]').length;

            var n = 0;

            $('#btn_add').click(function(){
                n++;
                $('table').append('<tr id="btn_minus'+n+'"><td><input type="text" name="cost_element" value="0"/></td><td><input type="text" name="description" value="{{cost_element.description}}"/></td><td><input type="text" name="usd_value" id="id_usd_value" value="{{cost_element.usd_value}}"/></td><td><input type="text" name="pesos_value" id="id_pesos_value" value="{{cost_element.pesos_value}}"/></td><td><input type="text" size= 3 name="percent" id="id_rer_value" value="{{cost_element.percent}}"/>%</td><td><input class="btn_minus btn btn-danger" name="btn_minus'+n+'" type="button" value="X"/></td></tr>');

                obj = $('input[name="percent"]').length;
            });

            $('table').on('click',".btn_minus",function(){
                var id = $(this).attr('name');
                $('tr[id="'+id+'"]').remove();
            });

            $('.btn_delete').click(function(){
                location.href = "";
            });

            setInterval(function(){
                var percents = new Array();

                $('input[name="percent"]').each(function() {
                    percents.push($(this).val());
                });

                var sum = 0;
                for(var i=0, l=percents.length; i<l; i++) {
                    sum = sum + parseInt(percents[i],10);
                }

                $('#msgValidar').empty();
                if(sum == 100){
                        $('#msgValidar').append('<h5 style="color: blue">Los valores de procentaje estan correctos.</h5>');
                        $('#btn_ok').removeClass('disabled');
                }else{
                    if(obj != 0){
                        $('#msgValidar').append('<h5 style="color: red">Los valores de procentaje deben sumar exactamente 100%.</h5>');
                        $('#btn_ok').addClass('disabled');
                    }
                }
            }, 500);

             $('#id_usd_value').on('change',
                  function(e) {
                        if($('#id_usd_value').val()>0){
                            $('#id_pesos_value').val(
                              Math.round(
                                parseFloat($(this).val()) * parseFloat($('#id_rer_value').val())
                              ) 
                            );
                        };
                  }
              );
        });
    </script>

Any idea how ??, thanks for your help !

jsanchezs
  • 1,992
  • 3
  • 25
  • 51
  • One problem is that you're appending a bunch of elements which will all have the same `id` attribute which is invalid; you need to use a class. The other problem is that you need to use a delegated event handler. See the question I marked as a duplicate for a full explanation of the issue and a solution. – Rory McCrossan Jan 13 '16 at 13:53
  • Thanks for your answer, i already read the post but there are so many answers that do not fit my code in order to not lose the other functions i already created because they're all required, i know it's simple than that , can you enlight me about how to create this class and just aplly the method in the last function ? – jsanchezs Jan 13 '16 at 14:35

0 Answers0