onchage event delegation to append textfields

Question

I have this jquery code where everytime i hit "btn_add" i get 3 new textfields (usd_value, pesos_value and percent )...i want to add a change event to all usd_value texts so when they change, pesos_value of all items change their values for =usd_value * percent.Im tryiing to do the delegation at the end of code 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" readonly/></td><td><input type="text" name="description" value="{{cost_element.description}}"/></td><td><input type="text" id="id_usd_value" name="usd_value" value="{{cost_element.usd_value}}"/></td><td><input type="text" id="id_pesos_value" name="pesos_value" value="{{cost_element.pesos_value}}"/></td><td><input type="text" size= 3 id="id_rer_value" name="percent" 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);

            $('table').on('change','.usd_value',function(){
                alert('work!');

            });

        });
    </script>

Can you help me ?? Thanks !!

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Draco18s no longer trusts SE, Jan 13 '16 at 16:35
If you check my code, you'll see that's exactly what im trying to do based on that post accepted answer but it doesn't work — jsanchezs, Jan 13 '16 at 16:37
The delegation code should occur on page load, not on button click. Or you'll end up binding the events more than once. — Draco18s no longer trusts SE, Jan 13 '16 at 16:42
Move the other `.on` calls outside `$('#btn_add').click(function(){ ... }` — Draco18s no longer trusts SE, Jan 13 '16 at 16:55
No, they are clearly inside the click event being applied to `#btn_add`, I can see the curly braces. Unless your code is out of date, or your intentation is misaligned. — Draco18s no longer trusts SE, Jan 13 '16 at 17:12

Baro · Accepted Answer · 2016-01-13T17:45:17.297

There are many errors in your code. First of all, you can't add dinamically more object with the same ID, and then refer to the objects by ID, the ID must be unique. You closed wrong the parenthesis too. And the change event is not wrong, but in your "append", you isn't setted the class, but "name" and "ID" TAG, and the reference ".usd_value" is a class selector...

Try this, but you must correct the rest of your code:

<script type="text/javascript">
  $(document).ready(function() {

    var n = 0;

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

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

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


    $('table').on('change', '.usd_value', function() {
      alert('work!');
      $('#id_pesos_value').val() = $('#id_usd_value').val() * $('#percent').val(); 
      // in this last line you have wrong the assignment and you can't refer to ID
      //     change with class like ".id_usd_value" etc...
    });

  });
  //}); <-- this is too much !

</script>

This is your code corrected on JSFiddle

Thanks, but still not working.....i updated the code upside so you can see and help me please, what could possibily be wrong ?? im sure it's well identaded — jsanchezs, Jan 13 '16 at 17:26
@jsanchezs Check the updated jsfiddle... obviously I changed some parts to make them more readable. I do not think you will be hard to correct them. — Baro, Jan 13 '16 at 17:45

onchage event delegation to append textfields

1 Answers1