Por que usar jQuery on () em vez de click ()

Atualmente com jQuery, quando preciso fazer algo quando ocorre um clique, farei assim ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Eu estava olhando para um código que outra pessoa tem em um projeto e eles fazem assim ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Observe que parece fazer a mesma coisa até onde eu posso dizer, exceto que eles estão usando a função live () que agora está obsoleta e os documentos do jQuery dizem para usar, on()mas de qualquer forma, por que usar live / on () em vez do meu primeiro exemplo?

Como você pode ter elementos gerados dinamicamente (por exemplo, vindo de uma chamada AJAX), você pode querer ter o mesmo manipulador de clique que foi anteriormente vinculado ao mesmo seletor de elemento, você então "delega" o evento de clique usando o on()argumento do seletor

Para demonstrar:

http://jsfiddle.net/AJRw3/

on()também pode ser sinônimo de click()se você não tiver um seletor especificado:

$('.elementClass').click(function() { // code 
});

é sinônimo de

$('.elementClass').on('click', function() { // code
});

No sentido de que ele adiciona o manipulador apenas uma vez a todos os elementos com classe elementClass. Se você tiver um novo elementClassvindo de, por exemplo $('<div class="elementClass" />'), o manipulador não será vinculado a esse novo elemento, você precisa fazer:

$('#container').on('click', '.elementClass', function() { // code
});

Supondo que #containerseja .elementClasso ancestral de

Há muitas respostas, cada uma abordando alguns pontos - espero que isso possa lhe dar sua resposta, com uma boa explicação sobre o que é e como usar.

Usando click()é um apelido para bind('click' ...). O uso bind()considera o DOM como ele é quando o ouvinte de evento está sendo configurado e vincula a função a cada um dos elementos correspondentes no DOM. Ou seja, se você usar $('a').click(...), vinculará a função fornecida ao evento click de cada tag âncora no DOM encontrada quando esse código for executado.

Usar live()era a maneira antiga em jQuery; ele foi usado para vincular eventos exatamente como bind()faz, mas não apenas os vincula a elementos no DOM quando o código é executado - ele também escuta as alterações no DOM e vinculará eventos a quaisquer elementos futuros correspondentes. Isso é útil se você estiver fazendo manipulação de DOM e precisar que exista um evento em alguns elementos que podem ser removidos / atualizados / adicionados ao DOM posteriormente, mas não existem quando o DOM é carregado pela primeira vez.

A razão que live()agora está depreciado é porque foi mal implementado. Para usar live(), você tinha que ser capaz de selecionar pelo menos um elemento no DOM inicialmente (eu acredito). Isso também fez com que uma cópia da função fosse executada para ser associada a cada elemento - e se você tiver 1000 elementos, são várias funções copiadas.

A criação da on()função foi para superar esses problemas. Ele permite que você vincule um único ouvinte de evento a um objeto que não mudará no DOM (portanto, você não pode usar on()em um elemento que será removido / adicionado ao DOM posteriormente - vincule-o a um objeto pai) e simplesmente aplique um elemento "filtro" para que a função só seja executada quando for enviada para um elemento que corresponda ao seletor. Isso significa que você tem apenas uma função existente (não um monte de cópias) vinculada a um único elemento - uma abordagem muito melhor para adicionar eventos "ao vivo" no DOM.

... e é isso que as diferenças são, e porque cada função existe e porque live()é depreciada.

• $("a").live()-> Ele se aplicará a todos <a>, mesmo se for criado após ser chamado.
• $("a").click()-> Só se aplicará a todos <a>antes de ser chamado. (Este é um atalho de bind(), e on()em 1.7)
• $("a").on()-> Fornece todas as funcionalidades necessárias para anexar manipuladores de eventos. (Mais recente em jQuery 1.7)

Cotações :

A partir do jQuery 1.7, o método .live () está obsoleto. Use .on () para anexar manipuladores de eventos. Os usuários de versões mais antigas do jQuery devem usar .delegate () em vez de .live ().
Este método fornece um meio de anexar manipuladores de eventos delegados ao elemento de documento de uma página, o que simplifica o uso de manipuladores de eventos quando o conteúdo é adicionado dinamicamente a uma página. Consulte a discussão de eventos diretos versus delegados no método .on () para obter mais informações.

O método .on () anexa manipuladores de eventos ao conjunto de elementos atualmente selecionado no objeto jQuery. A partir do jQuery 1.7, o método .on () fornece todas as funcionalidades necessárias para anexar manipuladores de eventos.

Para versões anteriores, o método .bind () é usado para anexar um manipulador de eventos diretamente aos elementos.

click()é um atalho para o método de não delegação de on(). Então:

$(".close-box").click() === $(".close-box").on('click')

Para delegar eventos com on(), ou seja, em objetos criados dinâmicos, você pode fazer:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Mas, on()introduz delegação em qualquer elemento estático, não apenas documentcomo o live()faz:

$("#closestStaticElement").on('click', '.close-box')

Você deve ler sobre a diferença entre liveebind .

Em suma, liveusa a delegação de eventos, permitindo que você se vincule a elementos que existem agora e no futuro.

Em contraste, manipuladores anexados via bind(e seus atalhos, como click) anexam manipuladores diretamente aos elementos DOM correspondentes ao seletor e, portanto, só estão vinculados a elementos que existem agora.

Uma consequência da liveflexibilidade do é a diminuição do desempenho, portanto, use-o apenas quando precisar da funcionalidade que ele oferece.

$el.click(fn) é um atalho para $el.on('click', fn)

Consulte http://api.jquery.com/click/ e http://api.jquery.com/on/ para obter mais informações.

Quando você precisa vincular alguns manipuladores de eventos, dynamically added elementsvocê deve usar live(obsoleto) ou onfazê-lo funcionar. Simplesmente $('element').click(...);não funcionará em nenhum elemento adicionado dinamicamente ao DOM.

Mais sobre a diferença entre .bind (), .live () e .delegate () do jQuery .

$ .click () é meramente um atalho para bind ou on. De documentos jQuery:

Nas duas primeiras variações, este método é um atalho para .bind ("click", handler), bem como para .on ("click", handler) a partir do jQuery 1.7. Na terceira variação, quando .click () é chamado sem argumentos, é um atalho para .trigger ("clique").

O .on()método anexa manipuladores de eventos ao conjunto atualmente selecionado de elementos no objeto jQuery. O click()método vincula um manipulador de eventos ao evento JavaScript "click" ou dispara esse evento em um elemento.

Na planície .click(... se o alvo do seletor mudar rapidamente (por exemplo, por meio de alguma resposta ajax), você precisará atribuir o comportamento novamente.

O .on(...é muito novo (jQuery 1.7) e pode cobrir o cenário ao vivo usando eventos delegados, o que é uma maneira mais rápida de anexar comportamento.

No onmétodo, o manipulador de eventos é anexado ao elemento pai em vez de ao destino.

exemplo: $(document).on("click", ".className", function(){});

No exemplo acima, o manipulador de eventos click está anexado ao documento. E usa o borbulhamento de eventos para saber se alguém clicou no elemento de destino.