Question

我的表格如下：

<input name="website_charges" id="website_charges" type="text" value="" /><br>
<input name="monthly_fixed_charges" id="monthly_fixed_charges" type="text" value="" />

<input name="members_registered" id="members_registered" type="text" value=""  /><br>
<input name="per_member" id="per_member" type="text" value="" /><br>
<input name="member_total_charges" id="member_total_charges" type="text" value="" /><br>

<input name="monthly_sessions" id="monthly_sessions" type="text" value="" /><br>
<input name="per_session" id="per_session" type="text" value="" /><br>
<input name="session_total_charges" id="session_total_charges" type="text" value="" /><br>

<input name="total_dues" id="total_dues" type="text" value="" /><br>
<input name="paid_amount" id="paid_amount" type="text" value="" /><br>
<input name="balance" id="balance" type="text" value="" /><br>

其中 #website_charges ， #monthly_fixed_charges ， #members_registered ， #per_member ，＃手动输入monthly_sessions ， #per_session 字段。

目前我的javascript代码动态添加 #member_total_charges 和 #session_total_charges 。

但我没有得到如何总和和添加这两个动态添加的字段值（即 #member_total_charges 和 #session_total_charges ）+ #website_charges + #monthly_total_charges #total_dues 字段然后显示最终余额<输入 #paid_amount Fiield后输入strong> #balance 字段？

目前的Javascript代码如下：

<script type="text/javascript">
$(document).ready(function() {
   $('#member_registered, #per_member').change(function(){
    var mem = parseInt($('#member_registered').val()) || 0;
    var permem = parseInt($('#per_member').val()) || 0;

    $('#member_total_charges').val(mem * permem);    
   });
   $('#monthly_sessions, #per_session').change(function(){
    var month = parseInt($('#monthly_sessions').val()) || 0;
    var perses= parseInt($('#per_session').val()) || 0;

    $('#session_total_charges').val(month * perses);    
});
});
</script>

JSFIDDLE Is Here****

Answer 1

要绑定动态生成的元素，请使用.live()函数绑定事件：

$("#member_total_charges, #session_total_charges").live("change", function () {
  //do sum work
});

请注意，change事件仅在<input>失去焦点后触发，因此如果您想在键入字符时立即运行sum函数，请改用keyup事件。< / p>

Answer 2

尝试使用此代码

<script type="text/javascript">
$(document).ready(function() {
   $('#member_registered, #per_member').on('input change',function(){
    var mem = parseInt($('#member_registered').val()) || 0;
    var permem = parseInt($('#per_member').val()) || 0;

    $('#member_total_charges').val(mem * permem);    
   });
   $('#monthly_sessions, #per_session').on('input change',function(){
    var month = parseInt($('#monthly_sessions').val()) || 0;
    var perses= parseInt($('#per_session').val()) || 0;

    $('#session_total_charges').val(month * perses);    
    });
    $('#member_total_charges, #session_total_charges').on('change',function(){
     var memtc = parseInt($('#member_total_charges').val()) || 0;
     var sestc = parseInt($('#session_total_charges').val()) || 0;

     $('#total_dues').val(memtc + sestc);    
    });
});
</script>

使用on（）方法可以更好地工作，你可以使用多个参数输入，更改，鼠标悬停等... 所以基本上如果你想改变一个动态添加的值，请选择theri id'并使用你需要的参数字符串调用.on（）方法，然后调用你的语句，就像你以前的元素一样。如果您有任何问题，可以查看this。我希望这是有帮助的

Answer 3

我解决了它如下：

1）我删除了@Bandon

建议的所有只读属性

2）更新代码（通过编辑@Bandon jsfiddle给出的代码）如下：

<script>
$(document).ready(function () {
    $('#website_charges, #monthly_fixed_charges').on('input change', function () {
    var web = parseInt($('#website_charges').val()) || 0;
    var mfc = parseInt($('#monthly_fixed_charges').val()) || 0;
    $('#subtotal').val(web + mfc);
});

$('#member_registered, #per_member').on('input change', function () {
    var mem = parseInt($('#member_registered').val()) || 0;
    var permem = parseInt($('#per_member').val()) || 0;

    $('#member_total_charges').val(mem * permem);
});
$('#monthly_sessions, #per_session').on('input change', function () {
    var month = parseInt($('#monthly_sessions').val()) || 0;
    var perses = parseInt($('#per_session').val()) || 0;

    $('#session_total_charges').val(month * perses);
});
$("input").live("keyup focus blur", "#subtotal_dues, #total_dues, #balance", function () {        
    var memtc = parseInt($('#member_total_charges').val()) || 0;
    var sestc = parseInt($('#session_total_charges').val()) || 0;
    $('#subtotal_dues').val(memtc + sestc);
    var memtca = parseInt($('#subtotal').val()) || 0;
    var sestca = parseInt($('#subtotal_dues').val()) || 0;
    $('#total_dues').val(memtca + sestca);
    var td = parseInt($('#total_dues').val()) || 0;
    var paid = parseInt($('#paid_amount').val()) || 0;
    $('#balance').val(td - paid);
    });
});
</script>

<强> UPDATED JSFIDDLE IS HERE

感谢@Bandon

使用Javascript通过更改函数获取的字段中的值的总和

3 个答案: