jquery - 克隆的关闭按钮无法正常工作

Question

我正在克隆一些表单元素，它们被包装在一个包含 div 中。 “关闭”按钮第一次起作用，但在其他克隆表单部分不起作用。

//克隆代码

function newObservation() {
    var len = $('.observation').length;
    var titleLen = $('.observation').length + 2;
    var $html = $('.observationTemplate').clone();

    $('.observationTitle:eq(0)').text("Observation - " + titleLen);
    $html.find('[name=audit-observation-category]')[0].name = "audit-observation-category" + len;
    $html.find('[name=audit-observation-notes]')[0].name = "audit-observation-notes" + len;
    $html.find('[name=audit-observation-recommendation]')[0].name = "audit-observation-recommendation" + len;
    $html.find('[name=audit-observation-severity]')[0].name = "audit-observation-severity" + len;
    $html.find('[name=audit-observation-person]')[0].name = "audit-observation-person" + len;
    $html.find('[name=audit-observation-date]')[0].name = "audit-observation-date" + len;

    return $html.html();
}
$(document).on('pageinit', function () {
    $('<div/>', {
        'class': 'observation',
        html: newObservation()
    }).appendTo('#auditContainer');

    $('#auditObservationButton').click(function () {
        $('<div/>', {
            'class': 'observation',
            html: newObservation()
        }).hide().appendTo('#auditContainer').slideDown('slow');
    });
    $('.observation').on('click', '.close', function () {
        $(this).closest('.observation').fadeOut();
    });
});

//HTML

            <div class="observationTemplate">
                <h4 class="observationTitle">Observation - 1</h4>
                <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" data-theme="b" class="close">close</a>
                <div data-role="fieldcontain">
                    <label for="audit-observation-category" class="ui-hidden-accessible select">Observation Category</label>
                    <select name="audit-observation-category" id="audit-observation-category" data-theme="e" data-corners="false">
                        <option value="" selected>Observation Category</option>
                        <option value="Site">Site</option>
                        <option value="Incident">Incident</option>
                        <option value="NearMiss">Near Miss</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label class="ui-hidden-accessible" for="audit-observation-notes">Notes</label>
                    <textarea cols="40" rows="8" name="audit-observation-notes" id="audit-observation-notes" class="notes" placeholder="Notes" maxlength="140"></textarea>
                </div>

                <div data-role="fieldcontain">
                    <label class="ui-hidden-accessible" for="audit-observation-recommendation">Recommendation</label>
                    <textarea cols="40" rows="8" name="audit-observation-recommendation" id="audit-observation-recommendation" class="notes" placeholder="Recommendation" maxlength="140"></textarea>
                </div>
                <!-- not working for some reason -->
                <div data-role="fieldcontain">
                    <label for="audit-observation-severity" data-theme="e">Severity</label>
                </div>

                <div data-role="fieldcontain">
                    <input type="range" name="audit-observation-severity" id="audit-observation-severity" value="15" min="15" max="180" step="15" data-hilight="true" data-theme="d">
                </div>

                <div data-role="fieldcontain">
                    <label for="audit-observation-person" class="ui-hidden-accessible select">Observation Person</label>
                    <select name="audit-observation-person" id="audit-observation-person" data-theme="e" data-corners="false">
                        <option value="" selected>Observation Person</option>
                        <option value="Jim">Jim</option>
                        <option value="Bob">Bob</option>
                        <option value="Gary">Gary</option>
                    </select>
                </div>

                 <div data-role="fieldcontain">
                    <label class="ui-hidden-accessible" for="audit-observation-date">Date</label>
                    <input type="date" name="audit-observation-date" id="audit-observation-date" placeholder="Date" value="">
                </div>
            </div><!--/observation-->

            <div id="auditContainer"></div>

            <div data-role="controlgroup" data-type="horizontal" data-theme="d">
                <a href="#" id="auditObservationButton" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="b">Add Observation</a>
            </div>

它不绑定(bind)到随后创建的表单部分。有什么想法吗？

Answer 1

From the jQuery on documentation :

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

因此，您应该在包含所有 .observation 元素的元素上调用 on。在这种情况下，您原始观察的父级就可以了。

$('#auditContainer').on('click', '.close', function(){
        //your code here
});