$ (document) .on (‘click’, ‘#id’, function () {}) vs $ (‘# id’). on (‘clique’, function () {})

Eu estava tentando descobrir qual é a diferença entre

$(document).on('click', '#id', function(){}); 

e

 $('#id').on('click', function(){}); 

Não consegui encontrar nenhuma informação sobre se há alguma diferença entre os dois e, em caso afirmativo, qual pode ser essa diferença.

Alguém pode, por favor, explicar se existe alguma diferença?

O primeiro exemplo demonstra a delegação de events . O manipulador de events é vinculado a um elemento mais alto na tree DOM (neste caso, o document ) e será executado quando um evento atingir esse elemento que tenha se originado em um elemento correspondente ao seletor.

Isso é possível porque a maioria dos events DOM borbulha a tree do ponto de origem. Se você clicar no elemento #id , será gerado um evento de clique que irá aparecer em todos os elementos ancestrais ( nota lateral: há, na verdade, uma fase antes disso, chamada de ‘fase de captura’, quando o evento desce da tree para o alvo ). Você pode capturar o evento em qualquer um desses ancestrais.

O segundo exemplo liga o manipulador de events diretamente ao elemento. O evento ainda estará em bolhas (a menos que você evite isso no manipulador), mas como o manipulador está ligado ao destino, você não verá os efeitos desse processo.

Ao delegar um manipulador de events, você pode garantir que ele seja executado para elementos que não existiam no DOM no momento da vinculação. Se o seu elemento #id foi criado após o segundo exemplo, seu manipulador nunca será executado. Ao vincular-se a um elemento que você sabe que está definitivamente no DOM no momento da execução, você garante que seu manipulador estará realmente anexado a algo e pode ser executado conforme apropriado posteriormente.

Considere o seguinte código

 
  • Coding
  • Answering
  • Getting Paid

Agora, aqui vai a diferença

 // Remove the myTask item when clicked. $('#myTask').children().click(function () { $(this).remove() }); 

Agora, e se adicionarmos uma myTask novamente?

 $('#myTask').append('
  • Answer this question on SO
  • ');

    Clicar neste item myTask não o removerá da lista, pois não possui manipuladores de events vinculados. Se, em vez disso, tivéssemos usado .on , o novo item funcionaria sem nenhum esforço extra de nossa parte. Veja como a versão .on seria:

     $('#myTask').on('click', 'li', function (event) { $(event.target).remove() }); 

    Resumo:

    A diferença entre .on() e .click() seria que .click() pode não funcionar quando os elementos DOM associados ao evento .click() são adicionados dinamicamente em um ponto posterior, enquanto .on() pode ser usado em situações em que os elementos DOM associados à chamada .on() podem ser gerados dinamicamente em um ponto posterior.