jQuery click action on append item

Question

Просмотрев документацию, я знаю, что проблема заключается в том, что элемент, который я хочу удалить, добавляется. Хотя я могу видеть, используя .on должен допускать это. Я добавляю некоторый контент в список с помощью кнопки, которую я хочу удалить при добавлении содержимого.

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

Содержимое добавляет штраф, но функция щелчка для его перепрограммирования не срабатывает. Однако он работает, если содержимое уже находится на странице, например. не прилагается позже.

Answer 1

Как только child-delete прилагается к DOM, $('.child-delete').on('click', ..) не будет работать, потому что jQuery не может его найти.

Вместо этого используйте event delegation:

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