Question

我有这个jquery代码，每次我点击“btn_add”我得到3个新的文本字段（usd_value，pesos_value和百分比）...我想在所有usd_value文本中添加一个更改事件，所以当它们改变时，所有项目的pesos_value更改= usd_value * percent的值。我尝试在代码结束时执行委托但是它不起作用：

 <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>

你帮我吗？谢谢!!

Answer 1

您的代码中存在许多错误。首先，您不能使用相同的ID添加更多对象，然后按ID引用对象，ID必须是唯一的。你也错了括号。并且更改事件没有错，但是在你的＆＃34;追加＆＃34;中，你没有设置课程，但是＆＃34; name＆＃34;和＆＃34; ID＆＃34;标签和参考＆＃34; .usd_value＆＃34;是一个类选择器......

尝试此操作，但您必须更正其余代码：

<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

onchage事件委托附加文本字段

1 个答案: