Mouse Event on Two Screens

Question

I have a screen with red background, when clicking on it opens a new with blue background. This blue background screen should trigger a Alert when you click on it, but it’s not happening. Could someone tell me?

NOTE: This is just a simplification of my problem.

$("#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>

Answer 1

When the page loads, your JS code will be executed:

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

$("#tela2").click(function () {
  alert("quero que apareça");
});

In the first part it defines that when the element #botao is pressed will be added the element #tela2 inside #tela.

In the second part it defines that when the element #tela2 an alert message appears on the screen, but at this time there is no element #tela2 on the page - it will only exist after #botao is pressed. That is, the event will be added to no element and will never occur during page execution.

To solve this, you need to use the function on, that can inform as second parameter a child selector to receive the event - even if it does not yet exist on the page. In fact, the event is assigned to the parent element, which will always check who was the target element of the click (this is the big difference between the functions).

What is the difference between . on("click", Function() {}) and . 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>

See that with on, the event will be associated with the parent element, #tela, but we inform that we just want the function callback is executed if the target element of the click is the element #tela2.

Note: also makes no sense you add multiple elements on the page with same id. Why it is considered wrong/bad to repeat an HTML ID? Be careful with that too.

Answer 2

Every time you create a new element by javascript, you can’t access it that way.

What you can do is let the element in display:none and then give a $("#tela2").show().

Or you can do the function like this:

$("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");
    }
});