Как добавить событие на элемент, создаваемый Jquery?

Question

[EvgenyKabakov]

Всем доброго времени суток!
Очень прошу помощи, я в jquery новичок, а нужно написать достаточно сложный для меня скрипт.
Имеется функция загрузчика файлов на сайт:

$(function(){
		var btnUpload=$('#upload');
		var status=$('#status');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				status.text('');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
				} else{
                    
					$('<li id="as"></li>').appendTo('#files').text(file).addClass('error');
					 document.getElementById('as').innerHTML+='<a class="closeic">X</a>';
                            
				}
                
			}
		});
        $('.closeic').click(function(){
            $(this).parent().remove();
        });
	});

И есть такой HTML:

<div id="mainbody" >
		<h3>&raquo; AJAX File Upload Form Using jQuery</h3>
		<!-- Upload Button, use any id you wish-->
        <div class="upload_wrap">
		    <div id="upload" >
		        <span id="butname">Прикрепить файл<span>
		    </div>
		    <span id="status" ></span>
		    <ul id="files" >
                        <li>
                             <a class="closeic">X</a>
                        </li>
                   </ul>
        </div>
        <div id="ex_wrap"></div>
</div>

То есть получается, что после добавления файлов они отображаются списком под кнопкой, добавляются в id="files". Надо сделать чтобы каждый новый создаваемый элемент можно было убрать из списка, для этого я добавил "document.getElementById('as').innerHTML+='X'", хотел сделать ссылку-кнопку "Х" и на нее повесить событие ".click", ну и соответственно задал этому элементу определенный css.
Так вот, вопрос) как правильно реализовать задуманное? Очень прошу помочь! :)
#JS #JQUERY

Answer 1

[Родион Мещеряков]

Я бы применил делегирование. Т.е. нужно навесить обработчик кликов на родительский элемент, который присутствует в HTML изначально, а не добавляется скриптом. В данном случае это элемент с id="files".

$('#files').on('click', '.closeic', function (e) {
  e.preventDefault();
  $(this).parent().remove();
});

Преимуществ несколько:
- не нужно ждать добавления динамического элемента;
- вместо множества слушателей событий на каждой кнопке закрытия, есть только один - на родительском элементе