Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2012, 18:42
Новичок на форуме
Отправить личное сообщение для Вадимчег Посмотреть профиль Найти все сообщения от Вадимчег
 
Регистрация: 04.01.2012
Сообщений: 3

Добавленная кнопка, не удаляет сама себя.
Есть тестовая кнопка "Добавить"
Она должна добавить Текстовое поле + 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'>";

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

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

Последний раз редактировалось Вадимчег, 21.06.2012 в 18:49.
Ответить с цитированием
  #2 (permalink)  
Старый 21.06.2012, 19:08
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

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

Либо вешайте обработчик после добавления кнопки.
Либо юзайте .live() (или .on() в новой версии)
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2012, 19:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>

Последний раз редактировалось Deff, 21.06.2012 в 19:17.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2012, 21:05
Новичок на форуме
Отправить личное сообщение для Вадимчег Посмотреть профиль Найти все сообщения от Вадимчег
 
Регистрация: 04.01.2012
Сообщений: 3

Спасибо Вам. Не знал о live().
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск