jQuery对附加项目的单击操作

Question

Having looked at the documentation I know that the issue lies with the fact the item I want to delete is being appended. Though from I can see using .on should allow for this. I am appending some content to a list with a button I want to delete the appended content when clicked.

<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();
    });

The content appends fine, but the click function for remaking it will not fire. It does work however if the content is already on the page, eg no appended later.

Answer 1

As soon as child-delete is appended to the DOM, $('.child-delete').on('click', ..) will not work beacause jQuery can not find it.

Instead use event delegation :

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