1

Estou com uma duvida na declaração de click de um elemento com jQuery, eu sei que possa fazer das seguintes formas:

$('body').on('click', '...selector...', function () {...})

ou

$('...selector...').click(function () {...})

Eu sei que da primeira maneira eu não preciso ficar dando rebind sempre que surgir um elemento novo na minha página, porém gostaria de saber:

  1. Se existe alguma diferença de gasto com memoria, processamento e performance entre essa duas variações
  2. Se exite mais alguma outra diferença entre elas , além da citada anteriormente.
  3. Ou até mesmo, se exite algum motivo que me faça optar a escolher uma das duas alternativas.
1

1 Resposta 1

0

A diferença básica entre os dois é em quem você atrela o evento de click.

No primeiro caso ele vai capturar o evento quando o mesmo chegar no body e tiver origem no seletor desejado. Como os eventos em javascript propagam, quando o usuário clicar no seletor ele vai propagar até o body e você vai capturar corretamente.

No segundo você atrela o evento diretamente ao seletor. Quando o clique tiver origem nele, você vai capturar o evento.

E qual a vantagem de atrelar ao body? Quando você faz isso, não é necessário que o elemento exista na página. Isso é extremamente útil quando você cria o elemento dinamicamente. Você consegue atrelar o evento a ele sem necessariamente ter criado o elemento ainda.

$('body').on('click', '#botao', carregaItems);
var botao = $('<div id="botao">ola</div>');
$('body').append(botao);

O click no botão vai disparar a função carregaItems

No segundo caso, você depende que o elemento esteja presente na página para atrelar o evento a ele. Se o código que atrela o evento for executado antes do código que cria o elemento, o elemento fica sem escuta no evento.

$('#botao').click(carregaItems);
var botao = $('<div id="botao">ola</div>');
$('body').append(botao);

O click no botão não vai disparar a função carregaItems porque for feito o bind do evento em um elemento que não existe no DOM ainda.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .