Iterate through appended items using jQuery
I have a form that uses jQuery for magic. On that form is a button Add
Account. That button appends fields Account and Amount and also another
button Remove Account (which if you can guess, removes those two fields).
This all works nicely...
On the same form there is another field Salary, which I would like to
compare with the total of all the Amount fields. The problem is when I use
jQuery's $.each() to iterate through the Amount fields it only recognizes
those fields that were present in the DOM when the page loaded, and not
the newly added fields.
How can I iterate through these appended Amount fields? (Or maybe there is
a better to do this altogether?)
What I'm doing now:
$(document).ready(function(){
$('#form').on('keyup', '.amount', balanceAmountsWithSalary);
});
var balanceAmountsWithSalary = function(){
var salary = parseInt($('#salary').val(),10);
var total = 0;
$('#accounts .account').each(function(){
var amount = parseInt($(this).find('.amount').val(),10);
total += amount;
});
if (total === salary) {
$('#accounts .account').each(function(){
// Do some stuff to each input.amount located in div.account
});
} else {
$('#accounts .account').each(function(){
// Do some BAD stuff to each input.amount located in div.account
});
}
}
Thanks!
No comments:
Post a Comment