JQuery - Fazendo o código executado para cada novo objeto DOM instanciado

Question

Estou me perguntando se isso é possível no jQuery.

Eu tenho algum código JavaScript que cria objetos DOM em tempo real, em resposta às ações do usuário. Alguns desses objetos DOM estão em uma estrutura específica - o contêiner sempre possui o mesmo atributo "classe".

O que eu gostaria de fazer é, toda vez que uma nova instância de um objeto DOM com a classe "X" é criado, quero a mesma peça do código JavaScript para executar. Esse código adicionará um evento "OnClick" a esse objeto DOM.

Infelizmente, não posso simplesmente colocar o código que atribui o OnClick no document.ready (), pois os objetos aos quais ele se liga estão sendo criados em tempo real, muito tempo depois que o documento.ready () foi executado.

O jQuery permite configurar ligações persistentes que estarão ligadas automaticamente a um tipo de objeto DOM, mesmo que seja gerado em tempo real?

Answer 1

Isso costumava ser coberto por 'LIVE', 'delegado' ou às vezes 'Bind'. Agora eles são substituídos por 'on', no entanto, existem algumas advertências, conforme discutido aqui: Javascript Event Binding Persistence

Answer 2

Acho que encontrei a resposta para minha própria pergunta, exatamente na documentação do jQuery, surpreendentemente.

http://docs.jquery.com/events/live#typefn

live( type, fn )

Adicionado no jQuery 1.3: Ligna um manipulador a um evento (como clique) para todo o elemento atual e futuro - correspondente. Também pode vincular eventos personalizados.

Answer 3

Você já parecia um plugin jQuery chamado LiveQuery?

Na página de documentação do LiveQuery:

Por exemplo, você pode usar o seguinte código para vincular um evento de clique em todas as tags, mesmo qualquer uma tags que você possa adicionar via AJAX.

$('a') 
>     .livequery('click', function(event) { 
>         alert('clicked'); 
>         return false; 
>     });

Depois de adicionar novas tags A ao seu documento, a consulta ao vivo vinculará o evento de clique e não há mais nada que precise ser chamado ou feito.

Answer 4

Não é possível no núcleo do jQuery (como você provavelmente percebeu com outras respostas se referindo a alguns plugins) ... essa pode ser uma tarefa muito simples se você não precisar necessariamente de toda a funcionalidade de algo como livequery

Para os navegadores que os suportam - use o evento DOM Nível 2 - 'DomNodeInserted':

http://www.w3.org/tr/dom-level-2-events/events.html#events-eventgroupings-mututhevents