Добавленная кнопка, не удаляет сама себя.
Есть тестовая кнопка "Добавить"
Она должна добавить Текстовое поле + 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'>"; То кнопка Удалить, удалит и себя, и все элементы, которые были созданы в результате нажатия на Добавить. Но! повторюсь, кнопки Удалить вызванные кнопкой Добавить, не будут функционировать. Будет работать только кнопка, непосредственно поставленная на странице. Уже довольно долго искал решение, но так и не нашел. |
Вы вешаете обработчик клика до того как добавляется кнопка (то есть на момент указать обработчика, кнопки еще нет).
Либо вешайте обработчик после добавления кнопки. Либо юзайте .live() (или .on() в новой версии) |
<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().
|
| Часовой пояс GMT +3, время: 04:31. |