Вход

Просмотр полной версии : Области видимости событий


Turok
14.08.2011, 18:01
есть 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
14.08.2011, 18:13
.live('click', function() {

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

Turok
14.08.2011, 18:36
Всё отлично работает, спасибо.

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

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

Особенности работы jQuery.live() (http://blog.fxposter.org/2010/06/16/jquery-live-method/)