Exemplo
Anexar um evento de clique com o <p> elemento:
$("p").on("click", function(){
alert("The
paragraph was
clicked.");
}); Tente você mesmo " Definição e Uso
O on() método atribui um ou mais manipuladores de eventos para os elementos selecionados e elementos filho.
A partir do jQuery versão 1.7, o on() método é o novo substituto para o bind(), live() e delegate() métodos. Este método traz muita consistência à API, e nós recomendamos que você use esse método, uma vez que simplifica a base de código jQuery.
Nota: Os manipuladores de eventos anexado usando o on() método irá funcionar para ambos os elementos atuais e futuros (como um novo elemento criado por um script).
Dica: Para remover manipuladores de eventos, utilize o off() método.
Dica: Para anexar um evento que é executado somente uma vez e, em seguida, remove-se, use a one() método.
Sintaxe
$(selector).on(event,childSelector,data,function,map)
| Parâmetro | Descrição |
|---|---|
| event | Requeridos. Especifica um ou mais event(s) ou namespaces para anexar os elementos selecionados. Vários valores de evento são separados por um espaço. Deve ser um evento válido |
| childSelector | Opcional. Especifica que o manipulador de eventos só deverão ser anexados aos elementos filho especificados (e não o selector em si, como o obsoleto delegate() método). |
| data | Opcional. Especifica dados adicionais para passar para a função |
| function | Requeridos. Especifica a função a ser executada quando o evento ocorre |
| map | Especifica um mapa do evento ( {event:function, event:function, ...}) contendo um ou mais eventos para anexar os elementos selecionados e funções para ser executado quando os eventos ocorrem |
Tente você mesmo - Exemplos
Mudando de bind() para on()
Como para usar on() para atingir o mesmo efeito que a bind() .
Mudando de delegate() para on()
Como para usar on() para atingir o mesmo efeito que delegate() .
Mudar de live() para on()
Como para usar on() para obter o mesmo efeito como live() .
Anexar vários eventos
Como anexar vários eventos a um elemento.
Anexar vários manipuladores de eventos usando o parâmetro mapa
Como anexar vários manipuladores de eventos para os elementos selecionados usando o parâmetro mapa.
Anexar um evento personalizado em um elemento
Como anexar um evento namespace personalizado em um elemento.
Passar ao longo de dados para a função
Como a passar ao longo de dados para a função.
Adicionar manipuladores de eventos para os elementos futuros
Mostram que o on() método também funciona para elementos ainda não criou.
Remover um manipulador de eventos
Como remover um manipulador de eventos usando o off() método.