Creating some buttons in a function and then calling a function when they are clicked. jquery

Question

$(document).ready(function(){
 var nam="";
 $("#sayHello").click(function(){
  nam = $("#textBox1").val();
  if(nam == ""){
   alert("Please let know what your name is.");
  }
  else if(/  /i.test(nam)){
   alert("Try to make sure that your not adding an extra space. It can be any name make one up if that helps.");
  }
  else{
   $("#welcome").html("<p id='hi'>Hello "+ nam +",</br> How was your day?</br>" + 
   "<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
   " <button id='bad'>Bad</button></p>").show();
   $("#inputBox").hide();
  }
  }); 
 $("#good").click(function(){
   $("#goodHit").html("<h3>I'm so happy for you!</h3>" + 
   "<p>Here is a quote to help you along your way.</p>" + 
   "<blochquote>The good old days are now.</blochquote>" + 
   "<figcaption>Tom Clancy</figcaption>").show();
   $("#hi").hide();
  
 });
  });

<!doctype html>
<html>
 <head>
 
 <title></title>
 </head>
 
 <body>
 <div id="container">
  <div id="inputBox">
  Here is my first text box.
  
  <input id="textBox1" type="text" value=""/>
  
  <button id="sayHello">Submit</button>
  </div>
  
  <div id="welcome">
  </div>
  
  <div id="goodHit">
  </div>
    
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="myJQ.js"></script>
 </body>

</html>

In my first .click(function(){..}); I make some buttons and put them into a div. I then hide my div that gave me that ability and show the buttons but when I want to use those buttons nothing is happening. I am new to javascript and jquery please help. here is my code.

$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
    nam = $("#textBox1").val();
    //some checks are here but unimportant

Here is where the buttons are made and put into my html.

        $("#welcome").html("<p id='hi'>Hello "+ nam +",</br> How was your day?</br>" + 
        "<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
        " <button id='bad'>Bad</button></p>").show();
        $("#inputBox").hide();
    }
    });

I then try and use one for what I want next to happen.

$("#good").click(function(){
        $("#goodHit").html("<h3>I'm so happy for you!</h3>" + 
        "<p>Here is a quote to help you along your way.</p>" + 
        "<blochquote>The good old days are now.</blochquote>" + 
        "<figcaption>Tom Clancy</figcaption>").show();
        $("#hi").hide();

});

Is the `$("#good").click(function(){` line run *after* the buttons are created and appended to the document? That would need to be immediately after the `.html()` call in the `$('#sayHello').click()` function. Either that or use a delegated event handler bound to a container element. — nnnnnn, Oct 22 '17 at 03:12
Please create a [mcve] with the snippet tool `<>` in the editor. — Alan Larimer, Oct 22 '17 at 03:13
@AlanLarimer The snippet should provide the same problem that I am comming across. thank you. — Nate, Oct 22 '17 at 03:21
See the linked duplicate question. Or [this question](https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) has an example very similar to your code. — nnnnnn, Oct 22 '17 at 03:26
The `.on()` method can be used to bind delegated handlers *or* "direct" handlers, depending on what arguments you pass it. — nnnnnn, Oct 22 '17 at 03:31

score 0 · Accepted Answer · answered Oct 22 '17 at 03:26

When your code runs it attempts to add an event handler to an element not yet in place. Attach that to the container instead.

$(document).ready(function() {
  var nam = "";
  $("#sayHello").click(function() {
    nam = $("#textBox1").val();
    if (nam == "") {
      alert("Please let know what your name is.");
    } else if (/  /i.test(nam)) {
      alert("Try to make sure that your not adding an extra space. It can be any name make one up if that helps.");
    } else {
      $("#welcome").html("<p id='hi'>Hello " + nam + ",</br> How was your day?</br>" +
        "<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
        " <button id='bad'>Bad</button></p>").show();
      $("#inputBox").hide();
    }
  });
$('#container').on('click',"#good",function() {
    $("#goodHit").html("<h3>I'm so happy for you!</h3>" +
      "<p>Here is a quote to help you along your way.</p>" +
      "<blockquote>The good old days are now.</blockquote>" +
      "<figcaption>Tom Clancy</figcaption>").show();
    $("#hi").hide();
  });
});

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="container">
    <div id="inputBox">
      Here is my first text box.
      <input id="textBox1" type="text" value="" />
      <button id="sayHello">Submit</button>
    </div>
    <div id="welcome">
    </div>
    <div id="goodHit">
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="myJQ.js"></script>
</body>
</html>

Why is the .on() method used on the container id? Thank you everyone for your help. Much appreciated. — Nate, Oct 22 '17 at 03:31
Note you could also bind to `welcome` or `document` as well. Best practice is to bind to the closest container - i.e. welcome in your case. In a very large DOM using `document` degrades performance - it has to look at everything in the document not just the limited container when it fires. — Mark Schultheiss, Oct 22 '17 at 03:35

Creating some buttons in a function and then calling a function when they are clicked. jquery

1 Answers1