0

Tenho uma tela com background vermelho, ao clicar sobre ela abre uma nova com background azul. Esta tela de background azul deveria acionar um alert quando clicar sobre ela, mas não está acontecendo. Alguém poderia me falar?

OBS.: Isso é apenas uma simplificação do meu problema.

$("#botao").click(function () {
   $("#tela").append('<div id="tela2"></div>');
});

$("#tela2").click(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>

6
  • tentei fazer ,isso mas não consegui Anserson. Nessa tela azul terá outros elementos clicáveis
    – thiago
    Commented 31/07/2018 às 17:03
  • Se a sua simplificação é fiel ao problema, então deveria resolver. O seu problema é que o click não funciona para elementos que são adicionados dinamicamente. Você pode fazer isso com o on 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.
    – Woss
    Commented 31/07/2018 às 17:06
  • eu editei a publicação.Adicionei um botão. Que chama a tela 2.É mais próximo do meu problema...E nesta tela 2 terá outros elementos clicáveis
    – thiago
    Commented 31/07/2018 às 17:17
  • Você entendeu porque o seu código não funciona?
    – Woss
    Commented 31/07/2018 às 17:18
  • Não ... ate agora não consegui solucionar o problema.
    – thiago
    Commented 31/07/2018 às 17:21

2 Respostas 2

1

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.

1
  • Entendi ...Anderson.Muito bem explicado .Obrigado.
    – thiago
    Commented 31/07/2018 às 17:54
0

Toda vez que você cria um novo elemento por javascript, você não consegue acessar ele desse jeito.

O que você pode fazer é deixar o elemento em display:none e depois dar um $("#tela2").show().

Ou você pode fazer a função assim:

$("div").click(function(e){
    var id = e.currentTarget.id;
    if(id === 'tela'){
        $("#tela").append('<div id="tela2" style="width: 300px;height: 250px;background:blue;"></div>');

    }else if(id === 'tela2'){
        alert("quero que apareça");
    }
});
2
  • Ainda não resolveu meu problema...pq nessa segunda tela terei outros elementos que serão clicados
    – thiago
    Commented 31/07/2018 às 17:02
  • Nesse caso, você vai ter que mudar sua estrategia. Pq, você ta colocando a div tela como pai, então toda vez que você clicar na filha, você vai tbm clicar no pai. Entende? Commented 31/07/2018 às 17:10

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