Области видимости событий

[Turok]

есть 3 блока div, при клике на любой из них срабатывает первое событие, а когда программно добавляем 4 блок, то это событие на нём не работает

<div id="test">
    <div class="test">test3</div>
    <div class="test">test2</div>
    <div class="test">test1</div>
</div>
<div id="press">Добавить блок</div>
<script>
    $('.test').click(function(){      //первое событие
        alert('hi');
        })
         
    $('#press').click(function(){     //второе событие
        $("#test").prepend('<div class=\"test\">test4</div>'); 
    })
</script>

как добиться чтоб первое событие работало с 4 блоком?

если первое событие включить во второе событие , то на 4 блоке будет срабатывать первое событие, но зато в первых трёх блоках он будет вылетать аж два раза

[walik]

.live('click', function() {

Просто навешивая клик у тебя не будет работать так как при добавлении события элемента на странице нету. Поэтому либо вручну ему добавлять, либо использовать .live()

[Turok]

Всё отлично работает, спасибо.

Если кто знает, как будет выглядить функция на чистом javascripte аналогичная .live ? Чтобы понять как это всё работает.

[walik]

live() вешает событие не на сам элемент, а на document. В результате bubbling-а событие, которое произошло над каким-либо элементом поднимается вверх по DOM-дереву и соответственно вызывает обработчики всех элементов, которые оно встретит. Итак, в конце концов событие доходит до document-а и обработчики вызываются у него. Обработчик, который устанавливает jQuery.live() проверяет - соответствует ли event.target (а именно здесь хранится обьект DOM-дерева, с которым произошло событие) соответствующему селектору и если соответствует - то выполняет обработчик.

Особенности работы jQuery.live()