Добавленная кнопка, не удаляет сама себя.

[Вадимчег]

Есть тестовая кнопка "Добавить"
Она должна добавить Текстовое поле + Button на её удаление.
По нажатию на Button должна удалиться сама кнопка удаления, и текстовое поле.

//По клику добавляем два input'a в <div class='main'>
$('#add_n').click(function() {
$('<input type="text" class="field"><input type="button"  value="Удалить" id="del_n">').fadeIn('slow').appendTo('.main');
});

//Удаляем кнопку+текстовое поле.
$('#del_n').click(function(){
$('#del_n').fadeOut();
$('input.field').fadeOut();
});

Суть проблемы в том, что по нажатию на кнопку Добавить, добавляется текстовое поле и кнопка.
Но если нажать на добавленную кнопку, то ничего не происходит.

С другой стороны.
Если сделать вот так:

echo "<input name='Vadim1' type='button'  value='Добавить' id='add_n'>";		
echo "<input name='Vadim2' type='button'  value='Удалить' id='del_n'>";

То кнопка Удалить, удалит и себя, и все элементы, которые были созданы в результате нажатия на Добавить.
Но! повторюсь, кнопки Удалить вызванные кнопкой Добавить, не будут функционировать.
Будет работать только кнопка, непосредственно поставленная на странице.

Уже довольно долго искал решение, но так и не нашел.

[walik]

Вы вешаете обработчик клика до того как добавляется кнопка (то есть на момент указать обработчика, кнопки еще нет).

Либо вешайте обработчик после добавления кнопки.
Либо юзайте .live() (или .on() в новой версии)

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<button class=add_n>Добавить</button>
<div class='main'></div><br/>



<script type="text/javascript">
//По клику добавляем два input'a в <div class='main'>
$('.add_n').click(function() {
$('<p class="field"><input type="text" class="field"><input type="button"  value="Удалить" class="del_n"> </p>').fadeIn('slow').appendTo('.main');
});

//Удаляем кнопку+текстовое поле.
$('.del_n').live('click',function(){
 $(this).parent('p.field').remove();
});
</script>

[Вадимчег]

Спасибо Вам. Не знал о live().