0

Dei uma procurada e não consegui achar nada sobre (provavelmente pq não estou sabendo como pesquisar). De qualquer forma, alguém ai sabe?

OBS: Eu não quero saber a diferença entre o .click e o .on('click'), leiam as duas opções com atenção por favor. O que quero saber é a diferença de referenciar o elemento que vai receber a ação antes de dizer qual a ação ou depois (colocando o document no lugar que antes ficava o elemento).

$('.botao').on('click') e $(document).on('click', '.botao')

3
  • O que entendeu da documentação onde trata do segundo parâmetro da função?
    – Woss
    Commented 11/10/2018 às 18:25
  • 2
    Diego não é a mesma pergunta, eu tinha visto essa questão já, a dúvida dela é a diferença entre o .click e o on.('click'). A minha pergunta é sobre a diferença de colocar o $(document) no lugar do elemento que recebe a ação, e referenciar o elemento depois. Se você reparar as duas chamadas da minha questão usam o .on('click')..
    – Thavi Lang
    Commented 11/10/2018 às 19:32
  • 1
    Oi Thavi, a diferença nesse caso seria que '$('.botao')' voce está realizando uma ação apenas nessa classe, uso recomendado para quando deseja adicionar uma ação em um elemento especifico. Já o '$(document).on('click', '.botao')' você está executando a ação em toda a pagina no caso se tiver mais que um elemento com a classe botao na pagina e quando for clicada essa ação será acionada. document = paginas.extensao window = pagina carregada .botao (apenas) = identificador do elemento.
    – Eduardo
    Commented 11/10/2018 às 19:45

2 Respostas 2

5

Quando você usa o:

$('.botao').on('click');

Você esta vinculando o evento de click para cada elemento que contenha a class ".botao" já existente no documento. O principal problema deste método é que, caso você precise adicionar um elemento dinamicamente com a mesma class ".botao", ele não vai possuir o evento de click, pois foi adicionado ao documento posteriormente.

E quanto ao:

$(document).on('click', '.botao');

Neste caso, o evento de click esta vinculado ao documento em si, e não aos elementos específicos da class ".botao". Este é o método mais recomendado de se usar, pois quando adicionar novos elementos ao documento eles ainda terão a referência do evento de click vinculado ao documento.

3
  • Então na realidade a diferença é o que as pessoas estavam falando que era a diferença do .click e do on('click') [que na documentação do jquery diz serem iguais]...
    – Thavi Lang
    Commented 11/10/2018 às 20:06
  • Acredito que o .click e .on('click') são descritos como iguais pois realizam a mesma função. A diferença é mesmo no escopo em qual são aplicados (e no event target).
    – ThiagoYou
    Commented 11/10/2018 às 20:10
  • 1
    Entendi. Obrigada :D
    – Thavi Lang
    Commented 11/10/2018 às 20:11
2

Veja esse exemplo: os botões 1 e 2 terão 2 alerts e o botão 3 somente um pois foi inserido posteriormente na DOM.

https://codepen.io/anon/pen/JmJLrY

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