onchage事件代表團追加textfields

Question

我有這個jQuery代碼，每當我點擊「btn_add」我得到3個新的textfields（usd_value，pesos_value和百分比）...我想添加一個更改事件到所有usd_value文本，所以當他們變化，所有項目的pesos_value改變其值= usd_value * percent.Im tryiing做在代碼的結尾代表團，但它不工作：

<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必須是唯一的。你也錯了括號。變化事件沒有錯，但在你的「追加」中，你沒有設置類，而是「名稱」和「ID」TAG，並且引用「.usd_value」是類選擇器...

試試這個，但你必須糾正你的代碼的其餘部分：

<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