Método jQuery .live () vs .on () para adicionar um evento de clique após carregar o html dinâmico

Estou usando o jQuery v.1.7.1, onde o método .live () é aparentemente obsoleto.

O problema que estou tendo é que, ao carregar dinamicamente o html em um elemento usando:

$('#parent').load("http://..."); 

Se eu tentar adicionar um evento de clique depois, ele não registrará o evento usando um destes métodos:

$('#parent').click(function() ...); 

ou

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Qual é a maneira correta de obter essa funcionalidade? Apenas parece funcionar com .live () para mim, mas eu não deveria estar usando esse método. Observe que #child é um elemento carregado dinamicamente.

Obrigado.

Se você deseja que o manipulador de cliques funcione para um elemento carregado dinamicamente, defina o manipulador de eventos em um objeto pai (que não seja carregado dinamicamente) e dê a ele um seletor que corresponda ao seu objeto dinâmico como este:

$('#parent').on("click", "#child", function() {});

O manipulador de eventos será anexado ao #parentobjeto e, sempre que um evento de clique aparecer na origem #child, ele acionará o manipulador de cliques. Isso é chamado de manipulação de eventos delegados (a manipulação de eventos é delegada a um objeto pai).

Isso é feito dessa maneira porque você pode anexar o evento ao #parentobjeto, mesmo quando o #childobjeto ainda não existe, mas, quando ele existir mais tarde e for clicado, o evento click passará para o #parentobjeto, verá que ele foi originado #childe existe um manipulador de eventos para clicar #childe acionar seu evento.

Tente o seguinte:

$('#parent').on('click', '#child', function() {
    // Code
});

A partir da $.on()documentação:

Os manipuladores de eventos são vinculados apenas aos elementos selecionados no momento; eles devem existir na página no momento em que seu código faz a chamada .on().

Seu #childelemento não existe quando você o chama $.on(), portanto o evento não é vinculado (ao contrário $.live()). #parent, No entanto, faz existir, então a ligação do evento para que é bom.

O segundo argumento no meu código acima funciona como um 'filtro' apenas gatilho se o evento borbulhava a #parentpartir #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: Estou fornecendo um pouco mais de informações sobre como isso funciona, porque ... palavras. Com este exemplo, você está colocando um ouvinte em todo o documento.

Quando você clickcombina com qualquer elemento (s) .selector, o evento borbulha até o documento principal - desde que não haja outros ouvintes que chamam event.stopPropagation()método - que superariam a subida de um evento aos elementos pai.

Em vez de vincular-se a um elemento ou conjunto de elementos específico, você está atendendo a eventos provenientes de elementos que correspondem ao seletor especificado. Isso significa que você pode criar um ouvinte, uma vez, que corresponderá automaticamente aos elementos existentes atualmente, bem como aos elementos adicionados dinamicamente.

Isso é inteligente por alguns motivos, incluindo desempenho e utilização de memória (em aplicativos de grande escala)

EDITAR:

Obviamente, o elemento pai mais próximo que você pode ouvir é melhor, e você pode usar qualquer elemento no lugar document, desde que os filhos para os quais deseja monitorar eventos estejam dentro desse elemento pai ... mas isso realmente não tem nada a ver com a pergunta.

O equivalente a .live () em 1.7 é assim:

$(document).on('click', '#child', function() ...); 

Basicamente, assista ao documento para eventos de clique e filtre-os para #child.

Eu sei que é um pouco tarde para uma resposta, mas eu criei um polyfill para o método .live (). Eu testei no jQuery 1.11 e parece funcionar muito bem. Eu sei que devemos implementar o método .on () sempre que possível, mas em grandes projetos, onde não é possível converter todas as chamadas .live () para as chamadas equivalentes .on () por qualquer motivo, o seguinte pode trabalhos:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Basta incluí-lo depois de carregar o jQuery e antes de ligar para live ().

.on () é para o jQuery versão 1.7 e superior. Se você possui uma versão mais antiga, use o seguinte:

$("#SomeId").live("click",function(){
    //do stuff;
});

Eu usei 'live' no meu projeto, mas um amigo sugeriu que eu deveria usar 'on' em vez de live. E quando tentei usar isso, tive um problema como você.

Nas minhas páginas, crio linhas de tabelas de botões e muitas coisas dinamicamente. mas quando eu uso a magia desapareceu.

As outras soluções, como usá-lo como uma criança, apenas chamam suas funções todas as vezes a cada clique. Mas eu acho uma maneira de fazer isso acontecer novamente e aqui está a solução.

Escreva seu código como:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Chamador (); depois de criar seu objeto na página assim.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

Dessa forma, sua função é chamada quando é suposto que nem todos os cliques na página.