A grande vantagem do método .on()
é permitir a delegação para casos em que o 'selector'
for adicionado dinamicamente (depois de o código ter sido corrido).
Com outras palavras: o .on()
serve para elementos descendentes do primeiro selector mesmo que não estejam presentes na altura em que o código é lido pois o jQuery só vai verificar o segundo selector na altura do evento ser detectado. Já o .click()
só se aplica a elementos já criados/existentes na altura em que o código é lido.
Neste caso, usando delegação, a sintaxe é:
$(document).on('click','seletor', function(){ /* ... */ });
Eu usei document
mas pode ser outro elemento, pai do 'seletor'
, que esteja presente na altura em que o .on()
é lido. Assim na altura do clique com o rato, o .on()
vai procurar o(s) elemento(s) delegados, usando só um event handler na memória.
No caso de queremos agarrar um evento a elementos que são criados dinamicamente ou carregados por ajax, em vez de adicionarmos um .click()
a cada vez que ele é carregado/criado, então podemos ter somente um .on()
para todos.
Usando .click()
vai ser carregado um event handler por elemento na memória. Usando .on()
com delegação é criado só um para todos os elementos.
No caso de não se usar delegação, como no exemplo da pergunta, então são semelhantes.
Links úteis para aprender mais sobre delegação de eventos em jQuery: