How do I get my jQuery function to recognize dynamically added fields?
First of all, the fiddle: http://jsfiddle.net/sdxopo
I have a form that records donors and the amount they donated; it allows people to add more rows as needed. I have a function that adds all the amounts and puts it in a "sum" field (which also runs on load because it can pull previously entered information from a database.)
The sum on load works fine. The sum on change works fine. Adding rows works fine. The problem comes with running the sum function on a created row -- it doesn't trigger. It only triggers on changing the content of the fields that were loaded with the page. What am I doing wrong?
Thanks!
For those who don't Fiddle:
HTML:
jQuery
I have a form that records donors and the amount they donated; it allows people to add more rows as needed. I have a function that adds all the amounts and puts it in a "sum" field (which also runs on load because it can pull previously entered information from a database.)
The sum on load works fine. The sum on change works fine. Adding rows works fine. The problem comes with running the sum function on a created row -- it doesn't trigger. It only triggers on changing the content of the fields that were loaded with the page. What am I doing wrong?
Thanks!
For those who don't Fiddle:
HTML:
<table class="table-condensed" id="table-community-support" width="100%">
<tr>
<th width="60%">Source</th>
<th>Amount</th>
</tr>
<tr class="donor-info-fields">
<td>
<input name="supportdonor_1" type="text" class="form-control" value="Average Joe's" />
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control numeric community-donor-amount" id="supportamount_1" name="supportamount_1" value="100.00" />
</div>
</td>
<td><a href="#" class="btn btn-success btn-xs add-txt">Add More</a>
</td>
</tr>
<tr class="donor-info-fields">
<td>
<input name="supportdonor_2" type="text" class="form-control" value="Globogym" />
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control numeric community-donor-amount" id="supportamount_2" name="supportamount_2" value="5000.00">
</div>
</td>
<td><a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>
</td>
</tr>
<tr>
<td align="right"><strong>Total</strong>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="supportTotal" name="supportTotal" value="" readonly>
</div>
</td>
</tr>
</table>
jQuery
jQuery(document).ready(function ($) {
//Add More
$("#table-community-support .add-txt").click(function () {
var i = $(".donor-info-fields").length + 1;
if (20 < i) {
alert('If you have more than 20 community supporters, please let us know.');
return false;
}
var more_textbox = $('<tr class="donor-info-fields"><td>' +
'<input name="supportdonor_' + i + '" type="text" class="form-control" value="-" /></td>' +
'<td><div class="input-group">' +
'<div class="input-group-addon">$</div>' +
'<input type="text" class="form-control numeric community-donor-amount" id="supportamount_' + i + '" name="supportamount_' + i + '" value="0">' +
'<td><a href="##" class="btn btn-danger btn-xs remove-txt">Remove</a></td>');
more_textbox.hide();
$(".donor-info-fields:last").after(more_textbox);
more_textbox.fadeIn("slow");
return false;
});
//Remove
$('#table-community-support').on('click', '.remove-txt', function () {
$(this).parent().parent().css('background-color', '#FF6C6C');
$(this).parent().parent().fadeOut("slow", function () {
$(this).parent().parent().css('background-color', '#FFFFFF');
$(this).remove();
$('.label-numbers').each(function (index) {
$(this).text(index + 1);
});
});
return false;
});
});
$('.community-donor-amount').change(calcCommunitySupport);
function calcCommunitySupport() {
var supportTotal = 0;
$(".community-donor-amount").each(function () {
supportTotal += +$(this).val();
});
//output to the form
$("#supportTotal").val(supportTotal);
}
// call it on document load
calcCommunitySupport();
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
change:
$('.community-donor-amount
to:
$('#table-community-suppor
You also need to update the total when remove is pressed:
//Remove
$('#table-community-suppor
$(this).parent().parent().
$(this).parent().parent().
$(this).parent().parent().
$(this).remove();
$('.label-numbers').each(f
$(this).text(index + 1);
});
calcCommunitySupport();
});
return false;
});
$('.community-donor-amount
to:
$('#table-community-suppor
You also need to update the total when remove is pressed:
//Remove
$('#table-community-suppor
$(this).parent().parent().
$(this).parent().parent().
$(this).parent().parent().
$(this).remove();
$('.label-numbers').each(f
$(this).text(index + 1);
});
calcCommunitySupport();
});
return false;
});
Premium Content
You need an Expert Office subscription to comment.Start Free Trial