blocks|key|1095809|text|添加新行后，keyup和change事件不会绑定到它们。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1095810|尝试使用：-|1095811|$(document).on('keyup','.units',+function()+{|code-block|syntax|javascript|1095812|和|1095813|$(document).on('change','.grade-select',+function()+{|1095814|从注释编辑|1095815|要将它们相加，创建一个新函数：|1095816|function+sumScores(){
+++var+score+=+0;
+++$('.block').each(function(i,+element){
++++++var+unit+=+$(element).find('.units').val();
++++++var+grade+=+$(element).find('.grade-select').val();

++++++//+do+calculation+and+add+to+score

+++});

+++$gpa.text(score.toFixed(2);+
}|1095817|然后将该函数设置为keyup/change处理程序。|1095818|$(document).on('keyup','.units',+sumScores);
$(document).on('change','.grade-select',+sumScores);|1095819|entityMap^0|6|5|C|6|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1C|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|10|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|11|$]]

after adding a new row the <code>keyup</code> and <code>change</code> events are not bind to them.

try using:-

<pre><code>$(document).on('keyup','.units', function() {
</code></pre>

and 

<pre><code>$(document).on('change','.grade-select', function() {
</code></pre>

EDIT from comment

to add them up, create a new function:

<pre><code>function sumScores(){
 var score = 0;
 $('.block').each(function(i, element){
 var unit = $(element).find('.units').val();
 var grade = $(element).find('.grade-select').val();

 // do calculation and add to score

 });

 $gpa.text(score.toFixed(2); 
}
</code></pre>

then set that function to the keyup/change handler.

<pre><code>$(document).on('keyup','.units', sumScores);
$(document).on('change','.grade-select', sumScores);
</code></pre>

blocks|key|2278231|text|我注意到代码的开头是：var+$units+=+$('.units');|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2278232|你的输入是通过克隆动态生成的。|2278233|您的计算只在第一次输入时工作的原因之一是因为$input只指向第一个输入，与$grade一样。|2278234|也许您期望$input在克隆其他输入时会自动接收它们。情况并非如此。它不像CSS规则那样工作。您需要像这样为每个克隆重新执行行：|2278235|$('.btn').click(function()+{
++$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
++$units+=+$('.units');
++$grade+=+$('.grade-select');
});|code-block|syntax|javascript|2278236|要操作所有值，需要循环所有元素，如下所示：|2278237|var+sum+=+0;
for+(var+n+=+0;+n+<+$units.length;+n%2B%2B)+{
++++sum+%2B=+1+*+$($units[n]).val();//1+*+->+is+for+assurance+it+adding+not+concat
++++//to+retreive+$grade+use+$($grade[n]).val()
}|2278238|entityMap^0|B|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|12|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|14|8|@]|D|@]|E|$O|P]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

I noticed the beginning of your code starts with: 
<code>var $units = $('.units');</code>

And your inputs are dynamically generated by cloning.

One reason why your computation only works at first input is because $input only points to the fist input, same with $grade.

Maybe you are expecting that $input will automatically take other input as they are cloned. It is not the case. It does not work like CSS rules.
You need to re-execute the line for every clone like this:

<pre><code>$('.btn').click(function() {
 $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
 $units = $('.units');
 $grade = $('.grade-select');
});
</code></pre>

To manipulate all values you need to loop all elements like this:

<pre><code>var sum = 0;
for (var n = 0; n &lt; $units.length; n++) {
 sum += 1 * $($units[n]).val();//1 * -&gt; is for assurance it adding not concat
 //to retreive $grade use $($grade[n]).val()
}
</code></pre>

blocks|key|1811989|text|由于输入是动态添加的，所以需要将事件绑定到最近的静态父级，例如.outer-box。由于事件冒泡，将其绑定到document是糟糕的/代价高昂的。添加输入就像编写一个在keyup和change上调用的函数一样容易，这也消除了代码重复。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1811990|+var+$oBox+=+$('.outer-box'),
++++$gpa+=+$('#gpa'),
++++$result+=+$('.result').hide();

$('.btn').click(function()+{
++++$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on("keyup",+".units",+function()+{
++++$gpa.text(getTotal());
});

$oBox.on("change",+".grade-select",+function()+{
++++$gpa.text(getTotal());
++++//Show+$result+only+if+it's++hidden
++++$result.is(":hidden")+&&+$result.show();
});

//The+function+I+stated+above
function+getTotal()+{
++++var+sum+=+0;++
++++//Loop+thru+the+units
++++$('.units').each(function()+{
++++++++var+$this+=+$(this);
++++++++//You+must+also+check+if+the+entered+unit+is+a+number
++++++++//to+avoid+operating+on+non-number+inputs
++++++++//https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN
++++++++if+(+!isNaN($this.val())+)+{
++++++++++++//Input+vals+are+always+of+type+string,+so,+convert+them+to+numbers
++++++++++++//Multiply+the+pairs
++++++++++++sum+%2B=+parseFloat($this.val()%7C%7C0)+*+parseFloat($this.parent().find('.grade-select').val()%7C%7C0);
++++++++}
++++});
++++//Format+the+number
++++return+sum.toFixed(2);
}|code-block|syntax|javascript|1811991|你的updated+pen|1811992|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/rOmwwr^0|V|A|1I|8|2C|5|2I|6|0|0|2|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Since the inputs are added dynamically, you need to bind events to the closest static parent, such as <code>.outer-box</code>. Binding it to <code>document</code> is bad/costly due to event bubbling. Adding up the inputs is as easy as writing a function that would be called on <code>keyup</code> and <code>change</code> which also eliminates code duplication.

<pre><code> var $oBox = $('.outer-box'),
 $gpa = $('#gpa'),
 $result = $('.result').hide();

$('.btn').click(function() {
 $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on("keyup", ".units", function() {
 $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
 $gpa.text(getTotal());
 //Show $result only if it's hidden
 $result.is(":hidden") &amp;&amp; $result.show();
});

//The function I stated above
function getTotal() {
 var sum = 0; 
 //Loop thru the units
 $('.units').each(function() {
 var $this = $(this);
 //You must also check if the entered unit is a number
 //to avoid operating on non-number inputs
 //https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN
 if ( !isNaN($this.val()) ) {
 //Input vals are always of type string, so, convert them to numbers
 //Multiply the pairs
 sum += parseFloat($this.val()||0) * parseFloat($this.parent().find('.grade-select').val()||0);
 }
 });
 //Format the number
 return sum.toFixed(2);
}
</code></pre>

Your <a href="http://codepen.io/anon/pen/rOmwwr" rel="nofollow">updated pen</a>

I'm working on a GPA calculator, but I've hit a road block.

Here's how the calculator looks like: <a href="http://codepen.io/m6cheung/pen/KdWGxa" rel="nofollow">http://codepen.io/m6cheung/pen/KdWGxa</a>.

Here is the JS part of it:

<pre><code>var $units = $('.units');
var $grade = $('.grade-select');
var $gpa = $('#gpa');
var sum = 0;

$('.btn').click(function() {
 $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$('.result').hide();

$units.keyup(function() {
 $gpa.text((($grade.val() * $(this).val()) / $(this).val()).toFixed(2)); 
});

$grade.change(function() {
 $gpa.text((($units.val() * $(this).val()) / $units.val()).toFixed(2));
 $('.result').show();
});
</code></pre>

What I want to know: is there any other way, so I can use jQuery to manipulate further <code>$units</code> and <code>$grade</code> values when I press the <code>Add Course</code> button? For now, it only works for the first set of input values.

How do I add up the vals of inputs using jquery?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在研究GPA计算器，但我遇到了障碍。下面是计算器的样子：。以下是它的JS部分：var $units = $('.units');var $grade = $('.grade-select');var $gpa = $('#gpa');var sum = 0;$('.btn').click(function() {  ...

问如何使用jquery计算输入量？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery计算输入量？EN