How do I get my jQuery function to recognize dynamically added fields?

First of all, the fiddle: http://jsfiddle.net/sdxopotw/1/

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>

Open in new window

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();

Open in new window

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 82

hieloCommented: 2015-07-22

change:
$('.community-donor-amount').change(calcCommunitySupport);

to:
$('#table-community-support').on('change','.community-donor-amount',calcCommunitySupport);

You also need to update the total when remove is pressed:

//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);
});
calcCommunitySupport();
});

return false;
});

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

SiobhanElaraAuthor Commented: 2015-07-22

Perfect, thank you so much!

How do I get my jQuery function to recognize dynamically added fields?

Who is Participating?