jQuery: -- Не работают скрипты в блоках созданных при помощи jQuery clone(), append()
Как можно заставить jQuery запускать события, к примеру при клике, в блоках созданных через append(), after() и т.п.
События почему-то срабатывают только для обычных блоков выведенных PHP скриптом. К примеру, вот готовый миникод:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<div class="event">Кликни на меня</div>
<script>
$('.event').click(function() {
alert('произошел клик')
});
$('.event').after('
<div class="event">Кликни на меня2</div>
');
</script>
Если нажать на "Кликни меня2" то ничего не произойдет. Почему так? И как эту траблу решить? PS: <div onclick="blabla()"> срабатывает если в функции не использовать jQuery |
Господи, да что же вы не пользуетесь поиском, перед тем как задавать вопросы... нужно делегировать события для динамичных DOM элементов, в jquery для этого аж 2 метода: live и delegate
|
да, раз 5 уже за последние дни!.. резюме сказанного выше:
<div class="event">Кликни на меня</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.event').live('click', function() {
alert('произошел клик');
})
.after('<div class="event">Кликни на меня2</div>');
</script>
|
Работает, спасибо!
kobezzza, поиском я пользоваться умею, но как можно что-то найти если не знаеш как сформулиловать запрос, неужели я бы додумался написать "делегировать события для динамичных DOM элементов", если мне нужно было всего лишь событие при клике подрихтовать |
А еще небольшо вопрос из этой-же темы. Если вывести onclick="blabla()" то как можно перехватить текущи блок методом $(this)?
Пример:
<div class="event" onClick="blabla();">Кликани меня</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function blabla() {
this.style.color = '#c00';
$(this).hide();
}
</script>
В примере не работает ни один ни другой способ( |
<div class="event" onclick="blabla(this);">Кликани меня</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function blabla(obj) {
obj.style.color = '#c00';
$(obj).hide();
}
</script>
|
ваый, ты лучший!!! Спсибенчик тебе, ато эти две бздюшки не давали мне нормально писать скрипты, приходилось чачу воротить
|
ну честно говоря, "чача" осталась.. если уж используешь jquery, так давай по-полной. вместо того, что у тебя, смотри что можно:
<div class="event">Кликани меня</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.event').live('click', function() {
$(this).css({
color: '#C00',
backgroundColor: '#EFC'
})
.hide();
});
</script>
|
| Часовой пояс GMT +3, время: 14:27. |