Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2013, 19:55
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Обработка событий добавленных элементов
Такой трабл. Добавляю элементы в DOM, они появляются, но не реагируют на события.
Т.е. к примеру:
Есть несколько элементов с классом "up", все они прекрасно реагируют на $('.up').click(function(){...});
Добавляю новые элементы с тем же классом - они появляются но на click не реагируют.
Пробовал повесить на вновь создаваемые элементы обработчик события через $('...').on(); - безрезультатно...

Подскажите, пожалуйста, в чём может быть дело?
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2013, 19:57
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

через on должно работать
пример в студию
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2013, 20:24
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Вот пример кода. У меня не совсем то, в плане, что у меня html через php генерируется. Я тут как сумел по быстрому всё в html сделал.

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
 
$('.up').click(function(){
    var curVal = $(this).next('input').val(),
        curAttr = parseInt($(this).next('input').attr('id')),
        prevAttr = curAttr - 1,
        prevElem = $('#'+prevAttr),
        prevVal = $(prevElem).val();
     
    $(this).next('input').val(prevVal);
    $(prevElem).val(curVal);
});
 
$('.delete').click(function(){
    var deletedBlock = $(this).parent();
     
    deletedBlock.remove();
});
 
$('#add_block').click(function(){
	var newId = parseInt($('#input_blocks input:last').attr('id'))+1;
	$(this).before("<span class='str_block'><span class='up' onClick='blockUp()'><img 

src='../city/css/img/arrow_up.png' height='15' /></span><input type='text' id='"+newId+"' 

value='' placeholder='Введите название' /><span class='delete' 

onClick='blockDelete()'>Удалить</span><br /></span>");
	
	$('.delete').on('click', function(){
		$(this).parent().remove();
	});
	
	$('.up').on('click', function(){
		var curVal = $(this).next('input').val(),
	        curAttr = parseInt($(this).next('input').attr('id')),
	        prevAttr = curAttr - 1,
	        prevElem = $('#'+prevAttr),
	        prevVal = $(prevElem).val();
	  
	    $(this).next('input').val(prevVal);
	    $(prevElem).val(curVal);
	});
});
 
});
</script>
<style>
.up, .delete, #add_block{
	color: #03C;
}
.up:hover, .delete:hover, #add_block:hover{
	cursor:pointer;
	color: #FFF;
}
</style>
</head>
<body>
<div id='input_blocks'>
    <span class='str_block'>
    <input type='text' id='1' value='Гостиницы' />
    <span class='delete''>Удалить</span><br /></span>  <!--при нажатии, родитель (str_block) 

удаляется-->
 
    <span class='str_block'><span class='up'>    <!--при нажатии, значение следующего input 

присваивается полю выше-->
         <img src='../city/css/img/arrow_up.png' height='15' />
    </span>
    <input type='text' id='2' value='Рестораны' />
    <span class='delete''>Удалить</span><br /></span>    
 
    <span id='add_block'>Добавить блок</span>           <!--при нажатии добавляется новый 

str_block с содержимым-->
</div>
</body>

Последний раз редактировалось Dozentos, 01.11.2013 в 21:47.
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2013, 21:13
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Господа, прошу прощения. Это всё моя невнимательность... Я же не на тот элемент обработчик вешал...
Через on всё прекрасно работает!!!
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2015, 14:10
Новичок на форуме
Отправить личное сообщение для keenself.ru Посмотреть профиль Найти все сообщения от keenself.ru
 
Регистрация: 26.09.2015
Сообщений: 3

События для динамически добавленных элементов в jQuery
Здесь есть 100% рабочий пример, для отработки событий добавленных элементов
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление обработчика событий при добавлении элементов vladimircape Events/DOM/Window 3 13.09.2012 09:57
Блокировка событий всех дочерних элементов moreo Элементы интерфейса 4 26.05.2012 23:58
Программный вызов событий для конкретных элементов iNfantry jQuery 9 31.01.2012 15:21
JQuery отложенная обработка событий hover DemonWather jQuery 2 09.03.2011 09:01
Обработка событий клавиатуры MaxPayne Events/DOM/Window 26 01.05.2009 10:37