Question

我有两个div #apparatusSection和#firefighterSection

#apparatusSection是一个静态div，但是当我点击Add Apparatus按钮时会动态创建#firefighterSection。当我这样做时，添加消防员按钮不会做任何事情，因为我认为它无法读取刚刚创建的动态div。添加装置按预期工作。如果我静态设置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> \
            ');
        });
    });

有关如何让我的脚本读取动态创建的div的任何想法，以便我可以添加多个消防员？

如何让jquery读取动态div？

0 个答案: