Quando a página é carregada, o seu código JS será executado:
$("#botao").click(function () {
$("#tela").append('<div id="tela2"></div>');
});
$("#tela2").click(function () {
alert("quero que apareça");
});
Na primeira parte ele define que quando o elemento #botao
for pressionado será adicionado o elemento #tela2
dentro de #tela
.
Na segunda parte ele define que quando o elemento #tela2
for pressionado uma mensagem de alerta surja na tela; mas neste momento não existe um elemento #tela2
na página - ele só existirá depois que #botao
for pressionado. Ou seja, o evento será adicionado a nenhum elemento e nunca ocorrerá durante a execução da página.
Para resolver isso, você precisa utilizar a função on
, que consegue informar como segundo parâmetro um seletor filho para receber o evento - mesmo que ele ainda não exista na página. Na verdade, o evento é atribuído ao elemento pai, que verificará sempre quem foi o elemento alvo do clique (essa é a grande diferença entre as funções).
Qual a diferença entre o .on("click", function() {}) e o .click(function() {})?
$("#botao").click(function() {
$("#tela").append('<div id="tela2"></div>');
});
$("#tela").on('click', '#tela2', function() {
alert("quero que apareça");
});
#tela {
width: 600px;
height: 450px;
background: red;
}
#tela2 {
width: 300px;
height: 250px;
background: blue;
}
#botao {
width: 50px;
height: 45px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tela">
<div id="botao">BOTAO</div>
</div>
Veja que com on
, o evento ficará associado ao elemento pai, #tela
, mas informamos que só queremos que a função callback seja executada se o elemento alvo do clique for o elemento #tela2
.
Nota: também não faz sentido você adicionar múltiplos elementos na página com mesmo id
. Por que é considerado errado/ruim repetir uma ID em HTML? Tome cuidado com isso também.
click
não funciona para elementos que são adicionados dinamicamente. Você pode fazer isso com oon
e passar três parâmetros para ele: evento, seletor do elemento filho e a função callback, tal como foi apresentado na pergunta supracitada.