Pinceladas da Web

jQuery 1.3 introduziu um novo recurso chamado live event binding que simplifica anexar eventos aos elementos já existentes como para elementos futuros. Isso é muito útil, pois utilizando o método antigo bind() são atribuídos eventos aos manipuladores que já estão presentes no DOM no momento em que o evento é vinculado. Com live() você pode escrever seu evento e possuir caráter vinculado, uma vez que ele é anexado a futuros elementos criados.

Não tive desculpa para utilizar esse recurso ainda, por isso, decidi criar um exemplo trivial para demonstrar. Neste exemplo, eu tenho uma lista com 3 elementos desordenados. Clicar nos itens irá removê-los da lista. Haverá também um link que com a opção de anexar novos itens(que deve também ter a opção de clicar e remover).

Em ambos os casos, essa é a marcação que será utilizada:

<a href="#" class="add">Adicionar item</a>
<ul id="items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
</ul>

Nota: Eu irei utilizar bind(‘click’, fn) ao invés de elm.click(fn) simplesmente por que a sintaxe é mais parecida com o live().

bind() em jQuery 1.2

Primeiro eu vou escrever duas simples funções JavaScript. Uma acrescenta itens a lista e a outra tema função de “remover os itens” utilizando fadeOut:

function addItem() {
	$('#items').append("<li>Elemento adicionado dinamicamente</li>");
}

function removeItem() {
	$(this).fadeOut();
}

Agora eu vou utilizar bind() para anexar a função de adicionar um novo item ao evento click:

$('.add').bind('click', addItem);
$('#items li').bind('click', removeItem);

Você pode ver no exemplo que qualquer um dos elementos pré-existente na lista quando clicados irão desaparecer, mas não os adicionados dinamicamente. Isso por que quando $(“#items li”).bind(“click”, removeItem); é executado, o evento só adiciona a função aos 3 elementos encontrados no DOM – os elementos dinamicamente adicionados não obterão essa função.

A fim de adicionar o evento click a novos elementos criados, bind() deve ser explicitamente chamado. Uma maneira de se fazer isso é criar uam função bindEvents() que irá anexar o evento enquanto o DOM é iniciado e quando novos elementos são criados.

function addItem() {
	$('#items').append("<li>Dynamically added</li>");
	bindEvents(); // Adiciona o evento a novos elementos.
}

function removeItem() {
	$(this).fadeOut();
}

function bindEvents() {
	$('.add').bind('click', addItem);
	$('#items li').bind('click', removeItem);
}

bindEvents();

O exemplo a seguir funciona corretamente, novos itens na lista já podem ser removidos quando clicados sobre eles. Isso não é difícil(e existem maneiras mais concisas de escrever isso), mas ter que atribuir comportamento explicitamente a novos elementos dessa forma é doloroso. Para isso use live().

live() em jQuery 1.3

Atingir os resulatos acima com jQuery 1.3 é estupidamente simples. Primeiro vamos deixar de lado a função bindEvents(), pois não iremos mais precisar dela. Então, vamos substituir as 2 chamadas para bind() da seguinte forma:

$('.add').live('click', addItem);
$('#items li').live('click', removeItem);

Dessa forma serão adicionados os eventos aos elementos pré-existentes e aos novos elementos criados, como você pode ver. Observe também que eu adicionei addItem para o seletor “.add”, poderíamos criar uma maior dinâmica ao adicionar novos item, mas eles devem funcionar sem código adicional.

Há alguns itens essenciais que você deve saber ao utilizar live(), vamos salientar as seguintes:

• Nem todos os eventos são suportados (ainda).
• live() só pode ser invocado em um seletor. Não irá funcionar em um objeto jQuery existente.
• Eventos live() não constituem a forma como os outros eventos normais fazem.

Um rápido exemplo de como jQuery está trabalhando para melhorar minha qualidade de vida! Por que você ainda não começou a utilizar jQuery, comece agora.

Esse post é uma tradução do original de: Kyle Fox.