Обработка событий добавленных элементов
Такой трабл. Добавляю элементы в DOM, они появляются, но не реагируют на события.
Т.е. к примеру: Есть несколько элементов с классом "up", все они прекрасно реагируют на $('.up').click(function(){...}); Добавляю новые элементы с тем же классом - они появляются но на click не реагируют. Пробовал повесить на вновь создаваемые элементы обработчик события через $('...').on(); - безрезультатно... Подскажите, пожалуйста, в чём может быть дело? |
через on должно работать
пример в студию |
Вот пример кода. У меня не совсем то, в плане, что у меня 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>
|
Господа, прошу прощения. Это всё моя невнимательность... Я же не на тот элемент обработчик вешал...
Через on всё прекрасно работает!!! |
События для динамически добавленных элементов в jQuery
Здесь есть 100% рабочий пример, для отработки событий добавленных элементов
|
| Часовой пояс GMT +3, время: 13:35. |