Link to home
Start Free TrialLog in
Avatar of SiobhanElara
SiobhanElaraFlag for United States of America

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SiobhanElara

ASKER

Perfect, thank you so much!