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>

它没有绑定到子目录创建的表单部分。有什么想法吗？

Answer 1

From the jQuery on documentation：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

因此，您应该在包含所有on元素的元素上调用.observation。在这种情况下，您原始观察的父母将会这样做。

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

Answer 2

可能你可以尝试这样的事情：

function PageInit() {

  $('body').on({

      click: function () { $(this).closest('.observation').fadeOut(); }

  }, '.close');

}

$(PageInit)

Answer 3

正如我在评论中所说，目标observation元素是在您的情况下动态创建的。在事件委托中，事件必须绑定到现有元素，因此您需要将单击处理程序绑定到要添加observation元素的容器元素

$('#auditContainer').on('click', '.observation .close', function(){
    $(this).closest('.observation').fadeOut();
});

克隆关闭按钮不能正常工作

3 个答案: