javascript - jQuery 在 append 项目上单击操作

Question

查看文档后，我知道问题在于我要删除的项目已被 append 。尽管从我看来使用 .on 应该允许这样做。我正在使用一个按钮将一些内容 append 到列表中，我想在单击时删除 append 的内容。

<ul id="children">
    <li id="child1">
        <label class="narrow-full">Child</label>
        <?php echo form_dropdown('year[]', $years, date('Y')); ?>
    </li>
</ul>

var c = 1;
    $( ".child-add" ).click(function() {
        $( "#child1" ).clone().append( "<span class='child-delete ui-icon ui-icon-trash inline-block'></span>" ).attr('id', 'child'+(++c) ).appendTo( "#children" );
    });

    $( ".child-delete" ).on('click',function() {
        $(this).parent().remove();
    });

内容 append 正常，但用于重新制作的单击功能不会触发。但是，如果内容已经在页面上，例如，它确实可以工作。以后不再追加。

Answer 1

一旦将 child-delete append 到 DOM，$('.child-delete').on('click', ..) 将不会工作，因为 jQuery 找不到它。

而是使用 event delegation :

$(document).on('click', '.child-delete', function() {
    $(this).parent().remove();
});