jQuery: -- Не работают скрипты в блоках созданных при помощи jQuery clone(), append()

[artnik]

Как можно заставить 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

[kobezzza]

Господи, да что же вы не пользуетесь поиском, перед тем как задавать вопросы... нужно делегировать события для динамичных 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>

[artnik]

Работает, спасибо!

kobezzza, поиском я пользоваться умею, но как можно что-то найти если не знаеш как сформулиловать запрос, неужели я бы додумался написать "делегировать события для динамичных DOM элементов", если мне нужно было всего лишь событие при клике подрихтовать

[artnik]

А еще небольшо вопрос из этой-же темы. Если вывести 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>

[artnik]

ваый, ты лучший!!! Спсибенчик тебе, ато эти две бздюшки не давали мне нормально писать скрипты, приходилось чачу воротить

[ваый]

ну честно говоря, "чача" осталась.. если уж используешь 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>