1

Mostrarei exemplos apenas do evento click para ficar mais simples de explicar, porem esta dúvida e referente a qualquer evento jquery.

Quando eu comecei a utilizar o jquery eu só utilizava o evento click da seguinte forma:

$("button").click(function(){
  alert('ok');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Confirmar</button>

Que por sinal funcionava muito bem, mas depois eu comecei a fazer da seguinte forma:

$("#area").html($("<button/>").text('Outro botão'));

//Primeira forma
$("button").click(function(){
  alert('ok 1');
});

//Segunda forma
$("button").on('click', function(){
  alert('ok 2');
});

//Terceira forma
$('#area').on('click', 'button', function (event) {
    event.preventDefault();
    alert('ok 3');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Confirmar</button>
<div id="area"></div>

Coloquei mais dois exemplos, a "segunda forma" eu comecei a utilizar porque eu reparei que as vezes quando eu criava um elemento dinamicamente com o jquery a "primeira forma" de utilizar o evento click não funcionava, utilizei esta forma por um bom tempo, até que um dia ela também não funcionou então descobrir a "terceira forma" e assim eu consigo colocar o evento click em qualquer elemento sem problemas.

Mas a minha "técnica" é a seguinte, tento a primeira, não funciona vou para segunda e por sua vez não funcionou passo para a terceira.

O que eu quero saber é o porque, isso é uma característica do jquery, é por causa do javascript, porque as vezes funciona e porque as vezes não funciona, é isso que eu queria saber, eu utilizo os eventos mas eu não sei o porque deste comportamento.

1 Resposta 1

2

A primeira é um atalho para $("button").on('click', function(){

$("button").click(function(){
  alert('ok 1');
});

Pode conferir em no próprio source do repositório oficial alias.js#L10, isto:

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup contextmenu" ).split( " " ),
    function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

Veja que tem o this.on( name, null, data, fn ), o .trigger só é executado se não passar o function, fizer isto por exemplo $("...").click();, que é usado para disparar o evento.


A segunda é a "padrão", e com ela você também poder criar eventos próprios fazendo uso do .trigger

$("button").on('click', function(){
  alert('ok 2');
});

A terceira forma na verdade se trata de delegação de evento, o click ocorre no #area, mas o evento é só disparado se o elemento que disparou o click em #area "casar" com a query do segundo parametro, ou seja button

$('#area').on('click', 'button', function () {
    alert('ok 3');
});

A vantagem do terceiro sobre os demais é que você não precisaria usar coisas como $.ready ou $(window).load para definir o evento click no botão, ele próprio já reconhece se existe o botão em #area, já que a checagem da delegação só ocorre no momento do click


  1. a "primeira forma" de utilizar o evento click não funcionava

  2. O que eu quero saber é o porque, isso é uma característica do jquery, é por causa do javascript, porque as vezes funciona e porque as vezes não funciona, é isso que eu queria saber, eu utilizo os eventos mas eu não sei o porque deste comportamento.

Isto provavelmente foi alguma confusão sua, é improvável que .on('click') funcionasse e .click não, já que é apenas um atalho, as unicas possibilidades possiveis, creio eu, de terem causado a falha seriam:

  • Um bug na versão especifica do jQuery que você esta usando
  • Algum add-on para jQuery que afetou seus scripts
  • Foi apenas alguma confusão sua, talvez outros eventos com stopPropagation ou algo semelhante que tenha impedido e você os removeu quando trocou para .on sem perceber.

Mas a minha "técnica" é a seguinte, tento a primeira, não funciona vou para segunda e por sua vez não funcionou passo para a terceira.

Eu pessoalmente optaria sempre pela terceira, é simples, não precisa checar se o DOM existe, se criar elemento novo vai funcionar, se remover não precisará fazer muita coisa, se necessita que qualquer elemento com uma classe ou atributo especifico na página tenha o evento basta usar document, exemplo:

$(document).on('click', '#area button', function () {
    alert('ok 3');
});

Ou assim (nesse caso elementos com classes foo e bar irão disparar o evento):

$(document).on('click', '.foo, .bar', function () {
    alert('ok 3');
});

Você deve fazer log-in para responder a esta pergunta.

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