0

I have two divs #apparatusSection and #firefighterSection

#apparatusSection is a static div but #firefighterSection is dynamically created when I click the Add Apparatus button. When i do this, the Add Firefighter button doesn't do anything as I presume it cannot read the dynamic div which was just created. The add apparatus works as expected. I can also get the add firefighter to work if I statically set up the div.

HTML:

<div class="form-group">
    <div id="apparatusSection">
        <div class="col-md-10"></div>
        <div class="col-md-2">
            <button id="addApparatus" name="addApparatus" class="btn btn-primary">Add Apparatus</button>
        </div>
    </div>
</div>

JQuery:

    var countApp = 0;
    var countFF = 0;
    $(function () {
        $('button#addApparatus').click(function () {
            countApp += 1;
            $('#apparatusSection').append(' \
                <div class="form-group"> \
                    <div id="firefighterSection" class="col-md-11 apparatus"> \
                        <!-- Select Basic --> \
                        <div class="form-group"> \
                            <label class="col-md-2 control-label" for="apparatusID">Apparatus</label> \
                            <div class="col-md-8"> \
                            <select id="apparatusID" name="apparatusID" class="form-control"> \
                                <option value="1">Option one</option> \
                                <option value="2">Option two</option> \
                            </select> \
                            </div> \
                        </div> \
                    <button id="addFirefighter" name="addFirefighter" class="btn btn-primary">Add Firefighter</button> \
                    </div> \
                </div> \
            ');
        });
    });

    $(function () {
        $('#apparatusSection').on('click', '.addFirefighter', function () {
            countFF += 1;
            $('#firefighterSection').append(' \
                <!-- Select Basic --> \
                <div class="form-group"> \
                    <label class="col-md-2 control-label" for="member">FireFighter</label> \
                    <div class="col-md-8"> \
                    <select id="member" name="member" class="form-control"> \
                        <option value="1">Option one</option> \
                        <option value="2">Option two</option> \
                    </select> \
                    <input type="checkbox" name="firefighter" id="firefighter-0" value="Driver">Driver \
                    <input type="checkbox" name="firefighter" id="firefighter-1" value="UBA">UBA \
                    <input type="checkbox" name="firefighter" id="firefighter-2" value="Bott">#Bott \
                    <input type="checkbox" name="firefighter" id="firefighter-3" value="WBA">WBA \
                    <input type="checkbox" name="firefighter" id="firefighter-4" value="MFR1">MFR1 \
                    <input type="checkbox" name="firefighter" id="firefighter-5" value="MFR2">MFR2 \
                    <input type="checkbox" name="firefighter" id="firefighter-6" value="Pump">Pump \
                    <input type="checkbox" name="firefighter" id="firefighter-7" value="SecOff">SecOff \
                    <input type="checkbox" name="firefighter" id="firefighter-8" value="Casc">Casc \
                    <input type="checkbox" name="firefighter" id="firefighter-9" value="AerO">Aer O \
                    </div> \
                </div> \
            ');
        });
    });

Any thoughts as to how to get my script to read the dynamically created div so i can add the multiple firefighters?

jAC
  • 3,155
  • 3
  • 18
  • 29
  • 1
    ID of an element must be unique... so use a class to target the `addFirefighter` element – Arun P Johny Dec 23 '14 at 04:06
  • I am not very good with java so the solution you said was the answer to my question and your comment does not make any sense to me. Would you be able to show an example? – jAC Dec 23 '14 at 12:13
  • 1
    `` then `$('#apparatusSection').on('click', '.addFirefighter', function () {})` – Arun P Johny Dec 23 '14 at 12:36
  • Side Note: `java != javascript` – Arun P Johny Dec 23 '14 at 12:37
  • ahh ok. Thanks. Yes, I should have said JS rather than java. I will test what you said and let you know. Thanks for the help! – jAC Dec 23 '14 at 12:47
  • Actually one more question :) When i go to click the add firefighter button on the second dynamically created apparatus section, the add firefighter button adds the fields to the first one that was created instead of the second one. Any thoughts there? – jAC Dec 23 '14 at 13:40
  • 1
    see http://jsfiddle.net/arunpjohny/Lr6u1L22/1/ – Arun P Johny Dec 24 '14 at 02:41
  • simply awesome! you rock. As simple as this is, i wouldn't have understood this without your help! – jAC Dec 24 '14 at 15:39

0 Answers0