Question

我想总结动态创建的textbox的值，但它不起作用。

＆＃13;

$(document).ready(function() {

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".code").each(function() {

    $(this).keyup(function() {
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".code").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

function addrow() {
  $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td>		                                  <td><input type="text" class="code" id="code" placeholder="Amount"/> &nbsp;</td> </tr>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customFields">
  <tr>
    <td>
      <input type="button" value="Add" onclick="addrow();" />
    </td>
  </tr>
</table>

＆＃13;

Answer 1

您应该在表格上使用.on()，这允许与新动态创建的元素进行交互。这将允许所有keyup中的所有.code（甚至是在加载页面后添加的#customFields）冒泡到$(document).ready(function() { $("#customFields").on( "keyup", ".code", function(){ calculateSum(); }); });。其余的代码不需要改变。

<html>
<head>
    <script>
        function FNADDTEXTFIELD() {
        var PreviousFields=document.getElementById('txtField').innerHTML;
            document.getElementById('txtField').innerHTML =PreviousFields+ '<input type="text"><br>&ensp;<br><input type="text"><br>&ensp;<br>'
        }
    </script>
</head>
<body>
    <div id="txtField">
    </div>
    <button type="button" onclick="FNADDTEXTFIELD()">Click me</button>
</body>
</html>

http://api.jquery.com/on/

Answer 2

请看 Running Code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".code").each(function() {

    $(this).keyup(function() {
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".code").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places

  $("#sum").html(sum.toFixed(2));
}

function addrow() {
  $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td>                                          <td><input type="text" class="code" id="code" placeholder="Amount" onKeyUp = "calculateSum()"/> &nbsp;</td> </tr>');
}
</script>
</head>
<body>

<table id="customFields">
  <tr>
    <td colspan ="2">
      <input type="button" value="Add" onclick="addrow();" />
    </td>
  </tr>
  <tr><td><div id="sum">value</div></td></tr>
</table>

</body>
</html>

如何将动态创建的文本框的值相加？

2 个答案: